2025-09-05 17:07:17 +02:00
52 changed files with 890 additions and 265 deletions
--- a/my-app/src/AppRoutes.jsx
+++ b/my-app/src/AppRoutes.jsx
@@ -9,9 +9,9 @@ import { BookingSettings } from './pages/BookingSettings';
 import { CourseSchedule } from './pages/CourseSchedule';
 import { CourseScheduleView } from './pages/CourseScheduleView';
 import { TestSession } from './pages/TestSession';
-import FullScreenLoader from './components/FullScreenLoader';
 import Home from './pages/Home';
 import CoursePage from './pages/CoursePage';
+import Profile from './pages/Profile';

 const AppRoutes = () => {
 	const location = useLocation();
@@ -124,6 +124,7 @@ const AppRoutes = () => {
 					<Route path="booking-settings" element={<BookingSettings />} />
 					<Route path="home" element={<Home />} />
 					<Route path="course/:courseId" element={<CoursePage />} />
+					<Route path="profile" element={<Profile />} />
 				</Route>
 			</Routes>
 		</>
--- a/my-app/src/Layout.jsx
+++ b/my-app/src/Layout.jsx
@@ -1,7 +1,7 @@
 // components/Layout.jsx
 import React from 'react';
 import { Outlet, Link } from 'react-router-dom';
-import Navigation from './components/Navigation';
+import Navigation from './components/layout/Navigation';

 export default function Layout() {
 	return (
--- a/my-app/src/components/ThemeToggle.module.css
+++ b/my-app/src/components/ThemeToggle.module.css
@@ -1,107 +0,0 @@
-.toggleButton {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: var(--spacing-xs);
-  border-radius: var(--border-radius-md);
-  transition: var(--transition-fast);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.toggleButton:hover {
-  background-color: var(--bg-muted);
-}
-
-.toggleContainer {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.toggle {
-  width: 44px;
-  height: 24px;
-  border-radius: 12px;
-  position: relative;
-  transition: var(--transition-medium);
-  border: 1px solid var(--border-medium);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.toggle.light {
-  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
-}
-
-.toggle.dark {
-  background: linear-gradient(to bottom, #4a4a4a, #2a2a2a);
-}
-
-.toggleHandle {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: linear-gradient(to bottom, #ffffff, #e0e0e0);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  transition: var(--transition-medium);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.toggle.light .toggleHandle {
-  left: 2px;
-  background: linear-gradient(to bottom, #ffd700, #ffed4a);
-  border-color: rgba(255, 165, 0, 0.3);
-}
-
-.toggle.dark .toggleHandle {
-  left: calc(100% - 20px);
-  background: linear-gradient(to bottom, #e6e6e6, #cccccc);
-  border-color: rgba(0, 0, 0, 0.2);
-}
-
-.toggleLabel {
-  font-size: var(--font-size-lg);
-  line-height: 1;
-  user-select: none;
-  min-width: 20px;
-  text-align: center;
-}
-
-/* iPhone-style pressed state */
-.toggleButton:active .toggle {
-  transform: scale(0.95);
-}
-
-.toggleButton:active .toggleHandle {
-  width: 20px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .toggleContainer {
-    gap: var(--spacing-xs);
-  }
-  
-  .toggle {
-    width: 40px;
-    height: 22px;
-  }
-  
-  .toggleHandle {
-    width: 16px;
-    height: 16px;
-  }
-  
-  .toggle.dark .toggleHandle {
-    left: calc(100% - 18px);
-  }
-  
-  .toggleLabel {
-    font-size: var(--font-size-md);
-  }
-}
--- a/my-app/src/components/booking/BookingCard.jsx
+++ b/my-app/src/components/booking/BookingCard.jsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Button } from 'react-aria-components';
 import styles from './BookingCard.module.css';
-import { convertDateObjectToString } from '../helpers';
-import Dropdown from './Dropdown';
-import { BookingTitleField } from './BookingTitleField';
-import { ParticipantsSelector } from './ParticipantsSelector';
-import { BookingProvider } from '../context/BookingContext';
-import { PEOPLE } from '../constants/bookingConstants';
+import { convertDateObjectToString } from '../../helpers';
+import Dropdown from '../ui/Dropdown';
+import { BookingTitleField } from '../forms/BookingTitleField';
+import { ParticipantsSelector } from '../forms/ParticipantsSelector';
+import { BookingProvider } from '../../context/BookingContext';
+import { PEOPLE } from '../../constants/bookingConstants';

 function BookingCard({ booking, onClick, isExpanded, onBookingUpdate, onBookingDelete }) {
 	const [selectedLength, setSelectedLength] = useState(null);
--- a/my-app/src/components/booking/BookingCard.module.css
+++ b/my-app/src/components/booking/BookingCard.module.css
--- a/my-app/src/components/booking/BookingDetailsModal.jsx
+++ b/my-app/src/components/booking/BookingDetailsModal.jsx
--- a/my-app/src/components/booking/BookingDetailsModal.module.css
+++ b/my-app/src/components/booking/BookingDetailsModal.module.css
--- a/my-app/src/components/booking/BookingModal.jsx
+++ b/my-app/src/components/booking/BookingModal.jsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Button, Dialog, Heading, Modal } from 'react-aria-components';
-import { convertDateObjectToString, getTimeFromIndex } from '../helpers';
-import Dropdown from './Dropdown';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import { convertDateObjectToString, getTimeFromIndex } from '../../helpers';
+import Dropdown from '../ui/Dropdown';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 import styles from './BookingModal.module.css';

 export function BookingModal({ 
--- a/my-app/src/components/booking/BookingModal.module.css
+++ b/my-app/src/components/booking/BookingModal.module.css
--- a/my-app/src/components/booking/BookingsList.jsx
+++ b/my-app/src/components/booking/BookingsList.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import styles from './BookingsList.module.css';
 import BookingCard from './BookingCard';
-import NotificationBanner from './NotificationBanner';
+import NotificationBanner from '../common/NotificationBanner';

 function BookingsList({ bookings, handleEditBooking, onBookingUpdate, onBookingDelete, showSuccessBanner, lastCreatedBooking, onDismissBanner, showDeleteBanner, lastDeletedBooking, onDismissDeleteBanner, showDevelopmentBanner, showBookingConfirmationBanner, showBookingDeleteBanner }) {
 	const [showAll, setShowAll] = useState(false);
--- a/my-app/src/components/booking/BookingsList.module.css
+++ b/my-app/src/components/booking/BookingsList.module.css
--- a/my-app/src/components/booking/InlineBookingForm.jsx
+++ b/my-app/src/components/booking/InlineBookingForm.jsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Button } from 'react-aria-components';
-import { convertDateObjectToString, getTimeFromIndex } from '../helpers';
-import Dropdown from './Dropdown';
-import { BookingTitleField } from './BookingTitleField';
-import { ParticipantsSelector } from './ParticipantsSelector';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import { convertDateObjectToString, getTimeFromIndex } from '../../helpers';
+import Dropdown from '../ui/Dropdown';
+import { BookingTitleField } from '../forms/BookingTitleField';
+import { ParticipantsSelector } from '../forms/ParticipantsSelector';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 import styles from './InlineBookingForm.module.css';

 export function InlineBookingForm({ 
--- a/my-app/src/components/booking/InlineBookingForm.module.css
+++ b/my-app/src/components/booking/InlineBookingForm.module.css
--- a/my-app/src/components/common/ContentLoader.jsx
+++ b/my-app/src/components/common/ContentLoader.jsx
--- a/my-app/src/components/common/ContentLoader.module.css
+++ b/my-app/src/components/common/ContentLoader.module.css
--- a/my-app/src/components/common/FullScreenLoader.jsx
+++ b/my-app/src/components/common/FullScreenLoader.jsx
--- a/my-app/src/components/common/FullScreenLoader.module.css
+++ b/my-app/src/components/common/FullScreenLoader.module.css
--- a/my-app/src/components/common/NotificationBanner.jsx
+++ b/my-app/src/components/common/NotificationBanner.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styles from './NotificationBanner.module.css';
-import { convertDateObjectToString } from '../helpers';
+import { convertDateObjectToString } from '../../helpers';

 const BANNER_VARIANTS = {
 	success: {
--- a/my-app/src/components/common/NotificationBanner.module.css
+++ b/my-app/src/components/common/NotificationBanner.module.css
--- a/my-app/src/components/common/PlaceholderBanner.jsx
+++ b/my-app/src/components/common/PlaceholderBanner.jsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import styles from './PlaceholderBanner.module.css';
+
+const PlaceholderBanner = ({ message = "Detta är en platshållare för utveckling. Funktionaliteten är inte färdigimplementerad än." }) => {
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  if (isDismissed) return null;
+
+  return (
+    <div className={styles.banner}>
+      <div className={styles.content}>
+        <div className={styles.iconContainer}>
+          <i className="bi bi-info-circle"></i>
+        </div>
+        <div className={styles.message}>
+          {message}
+        </div>
+        <button 
+          className={styles.dismissButton}
+          onClick={() => setIsDismissed(true)}
+          aria-label="Stäng banner"
+        >
+          <i className="bi bi-x-lg"></i>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default PlaceholderBanner;
--- a/my-app/src/components/common/PlaceholderBanner.module.css
+++ b/my-app/src/components/common/PlaceholderBanner.module.css
@@ -0,0 +1,94 @@
+.banner {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+  background-color: #fef3c7;
+  border-bottom: 1px solid #f59e0b;
+  padding: var(--spacing-md) 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: 0 var(--spacing-xl);
+}
+
+.iconContainer {
+  flex-shrink: 0;
+  color: #b45309;
+  font-size: 1.2rem;
+}
+
+.message {
+  flex: 1;
+  color: #b45309;
+  font-size: 0.9rem;
+  font-weight: var(--font-weight-medium);
+  line-height: 1.4;
+}
+
+.dismissButton {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: #b45309;
+  cursor: pointer;
+  padding: var(--spacing-xs);
+  border-radius: var(--border-radius-sm);
+  transition: var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  width: fit-content;
+}
+
+.dismissButton:hover {
+  background-color: rgba(180, 83, 9, 0.1);
+  color: #92400e;
+}
+
+.dismissButton:focus {
+  outline: 2px solid #f59e0b;
+  outline-offset: 2px;
+}
+
+/* Dark mode adjustments */
+:global([data-theme="dark"]) .banner {
+  background-color: #92400e;
+  border-bottom-color: #fbbf24;
+}
+
+:global([data-theme="dark"]) .iconContainer,
+:global([data-theme="dark"]) .message,
+:global([data-theme="dark"]) .dismissButton {
+  color: #fcd34d;
+}
+
+:global([data-theme="dark"]) .dismissButton:hover {
+  background-color: rgba(252, 211, 77, 0.15);
+  color: #fbbf24;
+}
+
+:global([data-theme="dark"]) .dismissButton:focus {
+  outline-color: #fbbf24;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .content {
+    padding: 0 var(--spacing-lg);
+  }
+  
+  .message {
+    font-size: 0.85rem;
+  }
+  
+  .iconContainer {
+    font-size: 1.1rem;
+  }
+}
--- a/my-app/src/components/forms/BookingDatePicker.jsx
+++ b/my-app/src/components/forms/BookingDatePicker.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { DatePicker } from '../react-aria-starter/src/DatePicker'; 
-import { getFutureDate, isDateUnavailable } from '../utils/bookingUtils';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import { DatePicker } from '../../react-aria-starter/src/DatePicker'; 
+import { getFutureDate, isDateUnavailable } from '../../utils/bookingUtils';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';

 export function BookingDatePicker() {
 	const booking = useBookingContext();
--- a/my-app/src/components/forms/BookingLengthField.jsx
+++ b/my-app/src/components/forms/BookingLengthField.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import Dropdown from './Dropdown';
-import { BOOKING_LENGTHS } from '../constants/bookingConstants';
-import { useBookingContext } from '../context/BookingContext';
+import Dropdown from '../ui/Dropdown';
+import { BOOKING_LENGTHS } from '../../constants/bookingConstants';
+import { useBookingContext } from '../../context/BookingContext';
 import styles from './BookingLengthField.module.css';

 export function BookingLengthField() {
--- a/my-app/src/components/forms/BookingLengthField.module.css
+++ b/my-app/src/components/forms/BookingLengthField.module.css
--- a/my-app/src/components/forms/BookingTitleField.jsx
+++ b/my-app/src/components/forms/BookingTitleField.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 import styles from './BookingTitleField.module.css';

 export function BookingTitleField({ compact = false }) {
--- a/my-app/src/components/forms/BookingTitleField.module.css
+++ b/my-app/src/components/forms/BookingTitleField.module.css
--- a/my-app/src/components/forms/ParticipantsField.jsx
+++ b/my-app/src/components/forms/ParticipantsField.jsx
--- a/my-app/src/components/forms/ParticipantsField.module.css
+++ b/my-app/src/components/forms/ParticipantsField.module.css
--- a/my-app/src/components/forms/ParticipantsSelector.jsx
+++ b/my-app/src/components/forms/ParticipantsSelector.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { PEOPLE, USER } from '../constants/bookingConstants';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import { PEOPLE, USER } from '../../constants/bookingConstants';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 import styles from './ParticipantsSelector.module.css';

 export function ParticipantsSelector({ compact = false }) {
--- a/my-app/src/components/forms/ParticipantsSelector.module.css
+++ b/my-app/src/components/forms/ParticipantsSelector.module.css
--- a/my-app/src/components/forms/RoomSelectionField.jsx
+++ b/my-app/src/components/forms/RoomSelectionField.jsx
@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
-import Dropdown from './Dropdown';
-import { SMALL_GROUP_ROOMS } from '../constants/bookingConstants';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import Dropdown from '../ui/Dropdown';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 import styles from './RoomSelectionField.module.css';

 export function RoomSelectionField() {
--- a/my-app/src/components/forms/RoomSelectionField.module.css
+++ b/my-app/src/components/forms/RoomSelectionField.module.css
--- a/my-app/src/components/layout/Navigation.jsx
+++ b/my-app/src/components/layout/Navigation.jsx
@@ -1,18 +1,38 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './Navigation.module.css'; // Import the CSS Module
 import { Link, useLocation } from 'react-router-dom';
 import { ThemeToggle } from './ThemeToggle';
-import { useSettingsContext } from '../context/SettingsContext';
+import { useSettingsContext } from '../../context/SettingsContext';

 import 'bootstrap-icons/font/bootstrap-icons.css';

 const Navigation = () => {
 	const [menuOpen, setMenuOpen] = useState(false);
+	const [coursesOpen, setCoursesOpen] = useState(false);
 	const location = useLocation();
 	const { getCurrentUser } = useSettingsContext();

 	const toggleMenu = () => {
 		setMenuOpen(!menuOpen);
+		setCoursesOpen(false);
+	};
+
+	// Prevent body scroll when mobile menu is open
+	useEffect(() => {
+		if (menuOpen) {
+			document.body.style.overflow = 'hidden';
+		} else {
+			document.body.style.overflow = 'unset';
+		}
+
+		// Cleanup on unmount
+		return () => {
+			document.body.style.overflow = 'unset';
+		};
+	}, [menuOpen]);
+
+	const toggleCourses = () => {
+		setCoursesOpen(!coursesOpen);
 	};

 	// Helper function to get user's initials
@@ -52,18 +72,17 @@ const Navigation = () => {
 				</div>
 			</div>
 			
-			{/* User Profile Section - Desktop only */}
-			<div className={styles.userSection}>
-				<div className={styles.userAvatar}>
-					<div className={styles.avatarInitials}>
-						{getInitials(getCurrentUser().name)}
-					</div>
-				</div>
-				<p className={styles.userName}>{getCurrentUser().name}</p>
-			</div>
-			
 			{/* Navigation - always visible in sidebar mode, toggleable in mobile */}
 			<nav className={`${styles.nav} ${menuOpen ? styles.navOpen : ''}`}>
+				<div className={styles.navScrollContainer}>
+				<Link onClick={handleClick} to="/profile" className={`${styles.navLink} ${styles.mobileOnly} ${styles.mobileProfileLink} ${isActive('/profile') ? styles.active : ''}`}>
+					<div className={styles.mobileUserAvatar}>
+						<div className={styles.avatarInitials}>
+							{getInitials(getCurrentUser().name)}
+						</div>
+					</div>
+					<span className={styles.navText}>{getCurrentUser().name}</span>
+				</Link>
 				<Link onClick={handleClick} to="/home" className={`${styles.navLink} ${isActive('/home') ? styles.active : ''}`}>
 					<i className={`bi ${isActive('/home') ? 'bi-house-door-fill' : 'bi-house-door'} ${styles.navIcon}`}></i>
 					<span className={styles.navText}>Home</span>
@@ -80,6 +99,46 @@ const Navigation = () => {
 					<i className={`bi ${isActive('/booking-settings') ? 'bi-gear-fill' : 'bi-gear'} ${styles.navIcon}`}></i>
 					<span className={styles.navText}>Booking Settings</span>
 				</Link>
+
+				{/* Mobile Courses Accordion */}
+					<button 
+						onClick={toggleCourses} 
+						className={`${styles.mobileOnly} ${styles.navLink} ${styles.accordionToggle}`}
+					>
+						<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+							<i className="bi bi-book" style={{ fontSize: '1.2rem', width: '24px', textAlign: 'center' }}></i>
+							<span className={styles.navText}>Kurser</span>
+						</div>
+						<i className={`bi ${coursesOpen ? 'bi-chevron-up' : 'bi-chevron-down'} ${styles.chevron}`} style={{ fontSize: '1.2rem' }}></i>
+					</button>
+					
+					<div className={`${styles.mobileOnly} ${styles.accordionContent} ${coursesOpen ? styles.accordionOpen : ''}`}>
+						<div className={styles.mobileTermGroup}>
+							<h4 className={styles.mobileTermTitle}>VT2025</h4>
+							<Link onClick={handleClick} to="/course/prototyper-inom-interaktionsdesign" className={styles.mobileCourseLink}>
+								Prototyper inom interaktionsdesign
+							</Link>
+							<Link onClick={handleClick} to="/course/analytiska-perspektiv-inom-mdi" className={styles.mobileCourseLink}>
+								Analytiska perspektiv inom MDI
+							</Link>
+							<Link onClick={handleClick} to="/course/vetenskaplig-metodik" className={styles.mobileCourseLink}>
+								Vetenskaplig metodik och kommunikation inom...
+							</Link>
+							<Link onClick={handleClick} to="/course/deltagande-design" className={styles.mobileCourseLink}>
+								Deltagande design
+							</Link>
+						</div>
+						
+						<div className={styles.mobileTermGroup}>
+							<h4 className={styles.mobileTermTitle}>HT2024</h4>
+							<Link onClick={handleClick} to="/course/programmering-1" className={styles.mobileCourseLink}>
+								Programmering 1
+							</Link>
+							<Link onClick={handleClick} to="/course/tidigare-kurser" className={styles.mobileCourseLink}>
+								Tidigare kurser
+							</Link>
+						</div>
+					</div>
 				
 				{/* Courses Section */}
 				<div className={styles.coursesSection}>
@@ -114,7 +173,23 @@ const Navigation = () => {
 						</Link>
 					</div>
 				</div>
+				</div>
 			</nav>
+			<div className={styles.sidebarBottom}>
+				{/* User Profile Section - Desktop only */}
+				<Link to="/profile" className={styles.userSection}>
+					<div className={styles.userAvatar}>
+						<div className={styles.avatarInitials}>
+							{getInitials(getCurrentUser().name)}
+						</div>
+					</div>
+					<span className={styles.userName}>{getCurrentUser().name}</span>
+				</Link>
+				{/* Theme Toggle - Desktop only */}
+				<div className={styles.themeToggleContainer}>
+					<ThemeToggle />
+				</div>
+			</div>
 		</header>
 	);
 };
--- a/my-app/src/components/layout/Navigation.module.css
+++ b/my-app/src/components/layout/Navigation.module.css
@@ -66,6 +66,40 @@
 	flex-direction: column;
 	background-color: var(--bg-primary);
 	border-top: 1px solid var(--border-light);
+	width: 100%;
+	overflow: hidden;
+}
+
+/* Mobile-specific height adjustments */
+@media (max-width: 1023px) {
+	.nav {
+		height: calc(100vh - 60px);
+		min-height: calc(100vh - 60px);
+	}
+}
+
+/* iOS Safari mobile specific - more precise detection */
+@media (max-width: 1023px) and (max-device-width: 768px) {
+	@supports (-webkit-touch-callout: none) {
+		.nav {
+			height: calc(100svh - 60px);
+			min-height: calc(100svh - 120px);
+		}
+	}
+}
+
+.navScrollContainer {
+	display: contents;
+}
+
+/* Mobile-specific scroll container */
+@media (max-width: 1023px) {
+	.navScrollContainer {
+		display: block;
+		height: 100%;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+	}
 }

 .navOpen {
@@ -89,6 +123,7 @@

 .navLink:hover {
 	background-color: var(--bg-muted);
+	color: var(--text-primary);
 }

 .navIcon {
@@ -112,6 +147,124 @@
 	display: none;
 }

+/* Theme Toggle Container - Mobile (hidden) */
+.themeToggleContainer {
+	display: none;
+}
+
+/* Mobile-only profile link */
+.mobileOnly {
+	display: flex;
+}
+
+.mobileProfileLink {
+	background-color: var(--bg-muted);
+	margin-bottom: var(--spacing-sm);
+	border-radius: var(--border-radius-md);
+	border-bottom: none !important;
+}
+
+.mobileUserAvatar {
+	width: 32px;
+	height: 32px;
+	flex-shrink: 0;
+}
+
+.mobileUserAvatar .avatarInitials {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	background-color: var(--color-primary);
+	color: var(--color-white);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.9rem;
+	font-weight: var(--font-weight-semibold);
+}
+
+/* Mobile Courses Accordion */
+.mobileCoursesSection {
+	flex-direction: column;
+}
+
+.accordionToggle {
+	background: none;
+	border: none;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	cursor: pointer;
+	box-sizing: border-box;
+	padding: var(--spacing-lg) var(--spacing-xl);
+	min-height: auto;
+	height: auto;
+}
+
+.accordionToggle:hover {
+	background-color: var(--bg-muted);
+}
+
+.chevron {
+	transition: var(--transition-fast);
+	color: var(--text-secondary);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.accordionContent {
+	max-height: 0;
+	overflow: hidden;
+	transition: max-height 0.3s ease;
+	background-color: var(--bg-tertiary);
+	display: flex;
+	flex-direction: column;
+}
+
+.accordionOpen {
+	max-height: none;
+}
+
+.mobileTermGroup {
+	padding: var(--spacing-md) var(--spacing-xl);
+	display: flex;
+	flex-direction: column;
+}
+
+.mobileTermGroup:first-child {
+	border-top: 1px solid var(--border-light);
+}
+
+.mobileTermTitle {
+	font-size: 0.8rem;
+	font-weight: var(--font-weight-semibold);
+	color: var(--text-secondary);
+	margin: 0 0 var(--spacing-sm) 0;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.mobileCourseLink {
+	display: block;
+	padding: var(--spacing-md) var(--spacing-lg);
+	margin-bottom: var(--spacing-sm);
+	font-size: 1rem;
+	color: var(--text-primary);
+	text-decoration: none;
+	border-radius: var(--border-radius-md);
+	transition: var(--transition-fast);
+	line-height: 1.4;
+	width: 100%;
+}
+
+.mobileCourseLink:hover {
+	background-color: var(--bg-muted);
+	color: var(--text-primary);
+}
+
 /* ===========================================
   DESKTOP SIDEBAR STYLES (≥ 1024px)
   ========================================== */
@@ -124,39 +277,25 @@
 		left: 0;
 		width: 280px;
 		height: 100vh;
+		min-height: 100vh;
 		flex-direction: column;
 		/*box-shadow: var(--shadow-xl);*/
 		border-right: 1px solid var(--border-light);
 		overflow-y: auto;
+		z-index: var(--z-header);
 	}

 	.top {
-		flex-direction: column;
+		flex-direction: row;
 		padding: var(--spacing-2xl);
 		gap: var(--spacing-lg);
 		border-bottom: 1px solid var(--border-light);
 		min-height: fit-content;
 	}

-	.left {
-		flex-direction: column;
-		align-items: center;
-		gap: var(--spacing-md);
-		width: 100%;
-	}
-
-	.right {
-		width: 100%;
-		justify-content: center;
-	}
-
-	.logo img {
-		height: 60px;
-	}
-
-	.brandText {
-		font-size: 1.3rem;
-		text-align: center;
+	/* Hide mobile theme toggle on desktop */
+	.right > :first-child {
+		display: none;
 	}

 	.menuIcon {
@@ -170,6 +309,8 @@
 		flex-direction: column;
 		padding: var(--spacing-xl);
 		gap: var(--spacing-xs);
+		height: auto;
+		overflow: visible;
 	}

 	.navLink {
@@ -208,6 +349,13 @@
 		gap: var(--spacing-md);
 		padding: var(--spacing-lg) var(--spacing-xl);
 		height: fit-content;
+		text-decoration: none;
+		transition: var(--transition-fast);
+		border-radius: 0;
+	}
+
+	.userSection:hover {
+		background-color: var(--bg-muted);
 	}

 	.userAvatar {
@@ -233,6 +381,7 @@
 		font-weight: var(--font-weight-semibold);
 		color: var(--text-primary);
 		font-size: 1rem;
+		margin: 0;
 	}

 	.userLastName {
@@ -290,7 +439,27 @@

 	.courseLink:hover {
 		background-color: var(--bg-muted);
-		color: var(--color-primary);
+		color: var(--text-primary);
+	}
+
+	/* Theme Toggle Container - Desktop */
+	.themeToggleContainer {
+		padding: var(--spacing-lg) var(--spacing-xl);
+		display: flex;
+		justify-content: center;
+		border-bottom: 1px solid var(--border-light);
+	}
+
+	/* Hide mobile-only profile link on desktop */
+	.mobileOnly {
+		display: none;
+	}
+
+	.sidebarBottom {
+		background-color: var(--bg-primary);
+		border-top: 1px solid var(--border-light);
+		position: sticky;
+		bottom: 0;
 	}
 }

--- a/my-app/src/components/layout/PageWrapper.jsx
+++ b/my-app/src/components/layout/PageWrapper.jsx
--- a/my-app/src/components/layout/ThemeToggle.jsx
+++ b/my-app/src/components/layout/ThemeToggle.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTheme } from '../context/ThemeContext';
+import { useTheme } from '../../context/ThemeContext';
 import styles from './ThemeToggle.module.css';

 export const ThemeToggle = () => {
@@ -12,14 +12,7 @@ export const ThemeToggle = () => {
      aria-label={`Switch to ${isDarkMode ? 'light' : 'dark'} mode`}
      title={`Switch to ${isDarkMode ? 'light' : 'dark'} mode`}
    >
-      <div className={styles.toggleContainer}>
-        <div className={`${styles.toggle} ${isDarkMode ? styles.dark : styles.light}`}>
-          <div className={styles.toggleHandle}></div>
-        </div>
-        <span className={styles.toggleLabel}>
-          {isDarkMode ? '🌙' : '☀️'}
-        </span>
-      </div>
+      <i className={`bi ${isDarkMode ? 'bi-sun' : 'bi-moon'}`}></i>
    </button>
  );
 };
--- a/my-app/src/components/layout/ThemeToggle.module.css
+++ b/my-app/src/components/layout/ThemeToggle.module.css
@@ -0,0 +1,34 @@
+.toggleButton {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  cursor: pointer;
+  padding: 0;
+  border-radius: 50%;
+  transition: var(--transition-fast);
+  color: var(--text-primary);
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  box-shadow: var(--shadow-sm);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.toggleButton:hover {
+  background-color: var(--bg-muted);
+  border-color: var(--border-medium);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.toggleButton:active {
+  transform: translateY(0);
+  box-shadow: var(--shadow-sm);
+}
+
+.toggleButton:focus {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
--- a/my-app/src/components/ui/Card.jsx
+++ b/my-app/src/components/ui/Card.jsx
--- a/my-app/src/components/ui/Card.module.css
+++ b/my-app/src/components/ui/Card.module.css
--- a/my-app/src/components/ui/ComboBox.jsx
+++ b/my-app/src/components/ui/ComboBox.jsx
--- a/my-app/src/components/ui/ComboBox.module.css
+++ b/my-app/src/components/ui/ComboBox.module.css
--- a/my-app/src/components/ui/Dropdown.jsx
+++ b/my-app/src/components/ui/Dropdown.jsx
--- a/my-app/src/components/ui/Dropdown.module.css
+++ b/my-app/src/components/ui/Dropdown.module.css
--- a/my-app/src/components/ui/TimeCard.jsx
+++ b/my-app/src/components/ui/TimeCard.jsx
@@ -1,7 +1,7 @@
 import { Button } from 'react-aria-components';
 import React from 'react';
 import styles from './TimeCard.module.css';
-import { useBookingContext } from '../context/BookingContext';
+import { useBookingContext } from '../../context/BookingContext';

 export default function TimeCard({
    startTimeIndex,
--- a/my-app/src/components/ui/TimeCard.module.css
+++ b/my-app/src/components/ui/TimeCard.module.css
--- a/my-app/src/components/ui/TimeCardContainer.jsx
+++ b/my-app/src/components/ui/TimeCardContainer.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import TimeCard from './TimeCard';
-import { InlineBookingForm } from './InlineBookingForm';
-import { BookingModal } from './BookingModal';
+import { InlineBookingForm } from '../booking/InlineBookingForm';
+import { BookingModal } from '../booking/BookingModal';
 import styles from './TimeCardContainer.module.css';
-import modalStyles from './BookingModal.module.css';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import modalStyles from '../booking/BookingModal.module.css';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';

 const SLOT_GROUPING_SIZE = 8;

--- a/my-app/src/components/ui/TimeCardContainer.module.css
+++ b/my-app/src/components/ui/TimeCardContainer.module.css
--- a/my-app/src/pages/BookingSettings.module.css
+++ b/my-app/src/pages/BookingSettings.module.css
@@ -2,7 +2,9 @@
 	max-width: 800px;
 	margin: 0 auto;
 	padding: 2rem;
-	font-family: system-ui, -apple-system, sans-serif;
+	font-family: var(--font-secondary);
+	background-color: var(--bg-primary);
+	color: var(--text-primary);
 }

 .header {
@@ -12,13 +14,13 @@

 .header h1 {
 	font-size: 2.5rem;
-	font-weight: 600;
-	color: #1f2937;
+	font-weight: var(--font-weight-semibold);
+	color: var(--text-primary);
 	margin-bottom: 0.5rem;
 }

 .header p {
-	color: #6b7280;
+	color: var(--text-secondary);
 	font-size: 1.1rem;
 }

@@ -29,19 +31,19 @@
 }

 .section {
-	background: white;
-	border: 1px solid #e5e7eb;
-	border-radius: 12px;
+	background: var(--bg-secondary);
+	border: 1px solid var(--border-light);
+	border-radius: var(--border-radius-2xl);
 	padding: 1.5rem;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	box-shadow: var(--shadow-sm);
 }

 .section h2 {
 	font-size: 1.5rem;
-	font-weight: 600;
-	color: #1f2937;
+	font-weight: var(--font-weight-semibold);
+	color: var(--text-primary);
 	margin-bottom: 1.5rem;
-	border-bottom: 2px solid #f3f4f6;
+	border-bottom: 2px solid var(--border-light);
 	padding-bottom: 0.5rem;
 }

@@ -60,14 +62,14 @@

 .setting label strong {
 	font-size: 1rem;
-	font-weight: 600;
-	color: #374151;
+	font-weight: var(--font-weight-semibold);
+	color: var(--text-primary);
 	display: block;
 }

 .description {
 	font-size: 0.875rem;
-	color: #6b7280;
+	color: var(--text-secondary);
 	margin-top: 0.25rem;
 	display: block;
 }
@@ -80,17 +82,18 @@

 .dateInput, .numberInput, .select, .textInput {
 	padding: 0.75rem;
-	border: 1px solid #d1d5db;
-	border-radius: 6px;
+	border: 1px solid var(--input-border);
+	border-radius: var(--border-radius-md);
 	font-size: 1rem;
-	transition: border-color 0.2s, box-shadow 0.2s;
-	background: white;
+	transition: var(--transition-medium);
+	background: var(--input-bg);
+	color: var(--input-text);
 }

 .dateInput:focus, .numberInput:focus, .select:focus, .textInput:focus {
 	outline: none;
-	border-color: #2563eb;
-	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+	border-color: var(--color-primary);
+	box-shadow: 0 0 0 3px var(--color-primary-light);
 }

 .dateInput {
@@ -111,34 +114,34 @@

 .clearButton {
 	padding: 0.5rem 1rem;
-	background: #f3f4f6;
-	border: 1px solid #d1d5db;
-	border-radius: 6px;
+	background: var(--button-secondary-bg);
+	border: 1px solid var(--border-light);
+	border-radius: var(--border-radius-md);
 	font-size: 0.875rem;
-	color: #374151;
+	color: var(--button-secondary-text);
 	cursor: pointer;
-	transition: all 0.2s;
+	transition: var(--transition-medium);
 	width: fit-content;
 }

 .clearButton:hover {
-	background: #e5e7eb;
-	border-color: #9ca3af;
+	background: var(--button-secondary-hover-bg);
+	border-color: var(--border-medium);
 }

 .currentStatus {
 	margin-top: 0.5rem;
 	font-size: 0.875rem;
-	color: #4b5563;
+	color: var(--text-secondary);
 }

 .mockLabel {
-	background: #fbbf24;
-	color: #92400e;
+	background: var(--notification-warning-border);
+	color: var(--notification-warning-bg);
 	padding: 0.125rem 0.375rem;
-	border-radius: 4px;
+	border-radius: var(--border-radius-sm);
 	font-size: 0.75rem;
-	font-weight: 600;
+	font-weight: var(--font-weight-semibold);
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
 }
@@ -153,7 +156,7 @@
 	flex: 1;
 	height: 6px;
 	border-radius: 3px;
-	background: #e5e7eb;
+	background: var(--border-light);
 	outline: none;
 	cursor: pointer;
 	-webkit-appearance: none;
@@ -164,25 +167,25 @@
 	width: 20px;
 	height: 20px;
 	border-radius: 50%;
-	background: #2563eb;
+	background: var(--color-primary);
 	cursor: pointer;
-	border: 2px solid white;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	border: 2px solid var(--bg-primary);
+	box-shadow: var(--shadow-sm);
 }

 .slider::-moz-range-thumb {
 	width: 20px;
 	height: 20px;
 	border-radius: 50%;
-	background: #2563eb;
+	background: var(--color-primary);
 	cursor: pointer;
-	border: 2px solid white;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	border: 2px solid var(--bg-primary);
+	box-shadow: var(--shadow-sm);
 }

 .sliderValue {
-	font-weight: 600;
-	color: #2563eb;
+	font-weight: var(--font-weight-semibold);
+	color: var(--color-primary);
 	min-width: 40px;
 	text-align: center;
 }
@@ -196,18 +199,18 @@
 .toggle {
 	width: 50px;
 	height: 24px;
-	background: #d1d5db;
+	background: var(--border-light);
 	border-radius: 12px;
 	border: none;
 	position: relative;
 	cursor: pointer;
-	transition: background-color 0.3s ease;
+	transition: var(--transition-slow);
 	-webkit-appearance: none;
 	appearance: none;
 }

 .toggle:checked {
-	background: #10b981;
+	background: var(--notification-success-icon-bg);
 }

 .toggle:before {
@@ -216,11 +219,11 @@
 	width: 20px;
 	height: 20px;
 	border-radius: 50%;
-	background: white;
+	background: var(--bg-primary);
 	top: 2px;
 	left: 2px;
-	transition: transform 0.3s ease;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	transition: var(--transition-slow);
+	box-shadow: var(--shadow-sm);
 }

 .toggle:checked:before {
@@ -228,60 +231,60 @@
 }

 .toggleStatus {
-	font-weight: 500;
-	color: #374151;
+	font-weight: var(--font-weight-medium);
+	color: var(--text-primary);
 }

 .actions {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	justify-content: center;;
+	justify-content: center;
 	gap: 1rem;
 	padding: 2rem;
-	background: #f9fafb;
-	border-radius: 12px;
-	border: 1px solid #e5e7eb;
+	background: var(--bg-tertiary);
+	border-radius: var(--border-radius-2xl);
+	border: 1px solid var(--border-light);
 	width: 100%;
 }

 .resetButton {
 	padding: 0.75rem 2rem;
-	background: #dc2626;
-	color: white;
+	background: var(--reset-button-border);
+	color: var(--color-white);
 	border: none;
-	border-radius: 6px;
+	border-radius: var(--border-radius-md);
 	font-size: 1rem;
-	font-weight: 600;
+	font-weight: var(--font-weight-semibold);
 	cursor: pointer;
-	transition: background-color 0.2s;
+	transition: var(--transition-medium);
 	width: fit-content;
 }

 .resetButton:hover {
-	background: #b91c1c;
+	background: var(--reset-button-hover-border);
 }

 .testSessionButton {
 	padding: 0.75rem 2rem;
-	background: #2563eb;
-	color: white;
+	background: var(--color-primary);
+	color: var(--color-white);
 	border: none;
-	border-radius: 6px;
+	border-radius: var(--border-radius-md);
 	font-size: 1rem;
-	font-weight: 600;
+	font-weight: var(--font-weight-semibold);
 	cursor: pointer;
-	transition: background-color 0.2s;
+	transition: var(--transition-medium);
 	width: fit-content;
 }

 .testSessionButton:hover {
-	background: #1d4ed8;
+	background: var(--color-primary-hover);
 }

 .info {
 	font-size: 0.875rem;
-	color: #6b7280;
+	color: var(--text-secondary);
 	text-align: center;
 }

--- a/my-app/src/pages/NewBooking.jsx
+++ b/my-app/src/pages/NewBooking.jsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import styles from './NewBooking.module.css';
-import { TimeCardContainer } from '../components/TimeCardContainer';
-import { BookingDatePicker } from '../components/BookingDatePicker';
-import { BookingTitleField } from '../components/BookingTitleField';
-import { ParticipantsSelector } from '../components/ParticipantsSelector';
-import { RoomSelectionField } from '../components/RoomSelectionField';
-import { BookingLengthField } from '../components/BookingLengthField';
+import { TimeCardContainer } from '../components/ui/TimeCardContainer';
+import { BookingDatePicker } from '../components/forms/BookingDatePicker';
+import { BookingTitleField } from '../components/forms/BookingTitleField';
+import { ParticipantsSelector } from '../components/forms/ParticipantsSelector';
+import { RoomSelectionField } from '../components/forms/RoomSelectionField';
+import { BookingLengthField } from '../components/forms/BookingLengthField';
 import { useBookingState } from '../hooks/useBookingState';
 import { BookingProvider } from '../context/BookingContext';
 import { useSettingsContext } from '../context/SettingsContext';
--- a/my-app/src/pages/Profile.jsx
+++ b/my-app/src/pages/Profile.jsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { useSettingsContext } from '../context/SettingsContext';
+import PlaceholderBanner from '../components/common/PlaceholderBanner';
+import styles from './Profile.module.css';
+
+const Profile = () => {
+  const { getCurrentUser } = useSettingsContext();
+  const user = getCurrentUser();
+  
+  // Helper function to get user's initials
+  const getInitials = (name) => {
+    return name.split(' ').map(word => word[0]).join('').toUpperCase();
+  };
+
+  return (
+    <>
+      <PlaceholderBanner message="Detta är ett tillfälligt första utkast av profilsidan! Design och funktionalitet kommer se annorlunda ut i den slutgiltiga versionen." />
+      <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.avatarLarge}>
+          <div className={styles.avatarInitials}>
+            {getInitials(user.name)}
+          </div>
+        </div>
+        <div className={styles.userInfo}>
+          <h1 className={styles.name}>{user.name}</h1>
+          <p className={styles.email}>{user.email}</p>
+          <p className={styles.username}>@{user.username}</p>
+        </div>
+      </div>
+
+      <div className={styles.content}>
+        <section className={styles.section}>
+          <h2>Personlig information</h2>
+          <div className={styles.infoGrid}>
+            <div className={styles.infoItem}>
+              <label>Namn</label>
+              <span>{user.name}</span>
+            </div>
+            <div className={styles.infoItem}>
+              <label>E-post</label>
+              <span>{user.email}</span>
+            </div>
+            <div className={styles.infoItem}>
+              <label>Användarnamn</label>
+              <span>{user.username}</span>
+            </div>
+            <div className={styles.infoItem}>
+              <label>Student-ID</label>
+              <span>{user.id}</span>
+            </div>
+          </div>
+        </section>
+
+        <section className={styles.section}>
+          <h2>Inställningar</h2>
+          <div className={styles.settingsGrid}>
+            <div className={styles.settingItem}>
+              <div className={styles.settingInfo}>
+                <h3>Notifikationer</h3>
+                <p>Hantera dina notifikationsinställningar</p>
+              </div>
+              <button className={styles.settingButton}>Konfigurera</button>
+            </div>
+            <div className={styles.settingItem}>
+              <div className={styles.settingInfo}>
+                <h3>Integritet</h3>
+                <p>Kontrollera dina sekretessinställningar</p>
+              </div>
+              <button className={styles.settingButton}>Hantera</button>
+            </div>
+          </div>
+        </section>
+
+        <section className={styles.section}>
+          <h2>Aktivitet</h2>
+          <div className={styles.activityList}>
+            <div className={styles.activityItem}>
+              <div className={styles.activityIcon}>📅</div>
+              <div className={styles.activityInfo}>
+                <h4>Senaste bokning</h4>
+                <p>Team standup - G5:7</p>
+                <span className={styles.activityDate}>3 sep 2025</span>
+              </div>
+            </div>
+            <div className={styles.activityItem}>
+              <div className={styles.activityIcon}>📚</div>
+              <div className={styles.activityInfo}>
+                <h4>Senaste kursaktivitet</h4>
+                <p>Prototyper inom interaktionsdesign</p>
+                <span className={styles.activityDate}>2 sep 2025</span>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+    </>
+  );
+};
+
+export default Profile;
--- a/my-app/src/pages/Profile.module.css
+++ b/my-app/src/pages/Profile.module.css
@@ -0,0 +1,232 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--spacing-2xl);
+  min-height: 100vh;
+  background-color: var(--bg-primary);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xl);
+  margin-bottom: var(--spacing-3xl);
+  padding-bottom: var(--spacing-2xl);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.avatarLarge {
+  width: 100px;
+  height: 100px;
+  flex-shrink: 0;
+}
+
+.avatarInitials {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  font-weight: var(--font-weight-bold);
+}
+
+.userInfo {
+  flex: 1;
+}
+
+.name {
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: 2.5rem;
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+}
+
+.email {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+}
+
+.username {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--text-muted);
+  font-weight: var(--font-weight-medium);
+}
+
+.content {
+  display: grid;
+  gap: var(--spacing-3xl);
+}
+
+.section {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-2xl);
+}
+
+.section h2 {
+  margin: 0 0 var(--spacing-xl) 0;
+  font-size: 1.5rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.infoGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+.infoItem {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.infoItem label {
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.infoItem span {
+  font-size: 1rem;
+  color: var(--text-primary);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--bg-tertiary);
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--border-light);
+}
+
+.settingsGrid {
+  display: grid;
+  gap: var(--spacing-lg);
+}
+
+.settingItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-lg);
+  background-color: var(--bg-tertiary);
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--border-light);
+}
+
+.settingInfo h3 {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: 1.1rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.settingInfo p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+}
+
+.settingButton {
+  padding: var(--spacing-sm) var(--spacing-lg);
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border: none;
+  border-radius: var(--border-radius-md);
+  font-size: 0.9rem;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  flex-shrink: 0;
+  width: fit-content;
+  height: fit-content;
+}
+
+.settingButton:hover {
+  background-color: var(--color-primary-hover, var(--color-primary));
+  transform: translateY(-1px);
+}
+
+.activityList {
+  display: grid;
+  gap: var(--spacing-lg);
+}
+
+.activityItem {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-lg);
+  background-color: var(--bg-tertiary);
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--border-light);
+}
+
+.activityIcon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+  margin-top: var(--spacing-xs);
+}
+
+.activityInfo {
+  flex: 1;
+}
+
+.activityInfo h4 {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: 1rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.activityInfo p {
+  margin: 0 0 var(--spacing-xs) 0;
+  color: var(--text-secondary);
+}
+
+.activityDate {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .container {
+    padding: var(--spacing-lg);
+  }
+  
+  .header {
+    flex-direction: column;
+    text-align: center;
+    gap: var(--spacing-lg);
+  }
+  
+  .name {
+    font-size: 2rem;
+  }
+  
+  .infoGrid {
+    grid-template-columns: 1fr;
+  }
+  
+  .settingItem {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-md);
+  }
+  
+  .settingButton {
+    align-self: stretch;
+  }
+  
+  .section {
+    padding: var(--spacing-lg);
+  }
+}
--- a/my-app/src/pages/RoomBooking.jsx
+++ b/my-app/src/pages/RoomBooking.jsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import styles from './RoomBooking.module.css';
 import { Link } from 'react-router-dom';
-import BookingsList from '../components/BookingsList';
-import Card from '../components/Card';
+import BookingsList from '../components/booking/BookingsList';
+import Card from '../components/ui/Card';
 import { useSettingsContext } from '../context/SettingsContext';
 import { USER } from '../constants/bookingConstants';