my-app/src/AppRoutes.jsx

@@ -94,6 +94,9 @@ const AppRoutes = () => {
 	}
 
 	useEffect(() => {
+		// Reset scroll position on route change
+		window.scrollTo(0, 0);
+		
 		setLoading(true);
 		const timer = setTimeout(() => setLoading(false), 800);
 		return () => clearTimeout(timer);

my-app/src/components/BookingTitleField.module.css

@@ -42,7 +42,7 @@
 	padding: 0.5rem 1rem;
 	border: 1px solid #ccc;
 	border-radius: 0.375rem;
-	font-size: 1rem;
+	font-size: 16px;
 	background-color: white;
 	font-family: inherit;
 	transition: border-color 0.2s ease;

my-app/src/components/BookingsList.module.css

@@ -3,7 +3,6 @@
 	padding-bottom: 2rem;
 	display: flex;
 	flex-direction: column;
-	padding-top: 1rem;
 }
 
 .bookingsContainer {

my-app/src/components/ComboBox.module.css

@@ -10,7 +10,7 @@
 
 .comboBoxInput {
   margin: 0;
-  font-size: 1.2rem;
+  font-size: 16px;
   background-color: var(--field-background);
   color: var(--field-text-color);
   border: 1px solid var(--border-color);

my-app/src/components/ParticipantsSelector.module.css

@@ -296,7 +296,7 @@
 	padding: 0.5rem 1rem;
 	border: 1px solid #ccc;
 	border-radius: 0.375rem;
-	font-size: 1rem;
+	font-size: 16px;
 	background-color: white;
 	font-family: inherit;
 	transition: border-color 0.2s ease;

my-app/src/pages/NewBooking.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './NewBooking.module.css';
 import { TimeCardContainer } from '../components/TimeCardContainer';
 import { BookingDatePicker } from '../components/BookingDatePicker';
@@ -15,6 +15,10 @@ export function NewBooking({ addBooking }) {
 	const booking = useBookingState(addBooking, getEffectiveToday());
 	const [showFilters, setShowFilters] = useState(false);
 	
+	useEffect(() => {
+		window.scrollTo(0, 0);
+	}, []);
+	
 	// Check if we should use inline form (hide title and participants from main form)
 	const useInlineForm = settings.bookingFormType === 'inline';
 	

my-app/src/pages/RoomBooking.jsx

@@ -1,12 +1,19 @@
-import React from 'react';
+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 { useSettingsContext } from '../context/SettingsContext';
+import { USER } from '../constants/bookingConstants';
 
 export function RoomBooking({ bookings, showSuccessBanner, lastCreatedBooking, onDismissBanner, onBookingUpdate, onBookingDelete, showDeleteBanner, lastDeletedBooking, onDismissDeleteBanner }) {
 	const { settings } = useSettingsContext();
+
+	useEffect(() => {
+		window.scrollTo(0, 0);
+	}, []);
+
+	const isTestSessionActive = settings.currentUserName !== USER.name;
 	
 	function handleEditBooking(booking) {
 		console.log(booking);
@@ -15,8 +22,16 @@ export function RoomBooking({ bookings, showSuccessBanner, lastCreatedBooking, o
 	
 	return (
 		<div className={styles.pageContainer}>
+			{isTestSessionActive && (
+				<div className={styles.welcomeSection}>
+					<div className={styles.welcomeContent}>
+						<h1 className={styles.welcomeTitle}>Välkommen, {settings.currentUserName}!</h1>
+						<p className={styles.welcomeSubtitle}>Hantera dina bokningar och reservera nya lokaler</p>
+					</div>
+				</div>
+			)}
 			<h1 className={styles.pageHeading}>Lokalbokning</h1>
-			<h2>Mina bokingar</h2>
+			<h2 className={styles.sectionHeading}>Mina bokingar</h2>
 			<BookingsList 
 				bookings={bookings} 
 				handleEditBooking={handleEditBooking}
@@ -32,7 +47,8 @@ export function RoomBooking({ bookings, showSuccessBanner, lastCreatedBooking, o
 				showBookingConfirmationBanner={settings.showBookingConfirmationBanner}
 				showBookingDeleteBanner={settings.showBookingDeleteBanner}
 			/>
-			<h2>Ny bokning</h2>
+			<hr className={styles.sectionDivider} />
+			<h2 className={styles.sectionHeading}>Ny bokning</h2>
 			<Link to='/new-booking'>
 				<Card imageUrl="/grupprum.jpg" header="Litet grupprum" subheader="Plats för 5 personer" />
 			</Link>

my-app/src/pages/RoomBooking.module.css

@@ -7,4 +7,92 @@
 	font-size: 2.6rem;
 	font-weight: 300;
 	font-family: 'The Sans', system-ui, sans-serif;
+}
+
+.sectionHeading {
+	font-size: 1.5rem;
+	font-weight: 600;
+	margin-bottom: 1rem;
+}
+
+.sectionDivider {
+	border: none;
+	border-top: 1px solid #dedede;
+	margin-bottom: 2rem;
+}
+
+.welcomeSection {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background: #3d50a8;
+	padding: 2rem 2.5rem;
+	margin: 1.5rem 0 2.5rem 0;
+	color: white;
+	box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
+	position: relative;
+	overflow: hidden;
+}
+
+.welcomeSection::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 100px;
+	height: 100px;
+	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+	border-radius: 50%;
+	transform: translate(20px, -20px);
+}
+
+.welcomeContent {
+	flex: 1;
+}
+
+.welcomeTitle {
+	font-size: 1.8rem;
+	font-weight: 700;
+	margin: 0;
+	font-family: 'The Sans', system-ui, sans-serif;
+	letter-spacing: -0.5px;
+}
+
+.welcomeSubtitle {
+	font-size: 1rem;
+	margin: 0.5rem 0 0 0;
+	opacity: 0.9;
+	font-weight: 400;
+}
+
+.welcomeIcon {
+	width: 48px;
+	height: 48px;
+	opacity: 0.8;
+	color: white;
+}
+
+.welcomeIcon svg {
+	width: 100%;
+	height: 100%;
+}
+
+@media (max-width: 768px) {
+	.welcomeSection {
+		padding: 1.5rem 1.8rem;
+		margin: 1rem 0 2rem 0;
+	}
+	
+	.welcomeTitle {
+		font-size: 1.5rem;
+	}
+	
+	.welcomeSubtitle {
+		font-size: 0.9rem;
+	}
+	
+	.welcomeIcon {
+		width: 40px;
+		height: 40px;
+	}
 }

my-app/src/pages/TestSession.jsx

@@ -3,25 +3,11 @@ import { useNavigate } from 'react-router-dom';
 import { useSettingsContext } from '../context/SettingsContext';
 import styles from './TestSession.module.css';
 
-const NORMAL_NAMES = [
-	"Nigel Twittlebottom",
-	"Percival Crumplebottom", 
-	"Reginald Puddingworth",
-	"Algernon Snodgrass",
-	"Bartholomew Wigglesworth"
-];
-
 export function TestSession() {
 	const [userName, setUserName] = useState('');
-	const [isUsingNormalName, setIsUsingNormalName] = useState(false);
 	const { updateSettings } = useSettingsContext();
 	const navigate = useNavigate();
 
-	const handleNormalNameSelect = (name) => {
-		setUserName(name);
-		setIsUsingNormalName(true);
-	};
-
 	const handleCustomNameChange = (e) => {
 		setUserName(e.target.value);
 		setIsUsingNormalName(false);
@@ -43,7 +29,7 @@ export function TestSession() {
 			<div className={styles.content}>
 				<div className={styles.header}>
 					<h1>Testsession</h1>
-					<p>Välommen! Ange ditt namn för att börja:</p>
+					<p>Välkommen! Ange ditt namn för att börja:</p>
 				</div>
 
 				<div className={styles.nameSection}>

my-app/src/pages/TestSession.module.css

@@ -36,12 +36,13 @@
 .nameInput {
 	width: 100%;
 	padding: 0.75rem 1rem;
-	font-size: 1rem;
+	font-size: 16px;
 	border: 1px solid #d1d5db;
 	border-radius: 6px;
 	outline: none;
 	margin-bottom: 1.5rem;
-
+	-webkit-text-size-adjust: 100%;
+	-webkit-appearance: none;
 }
 
 .nameInput:focus {
@@ -85,7 +86,7 @@
 	font-size: 1rem;
 	cursor: pointer;
 	margin-top: 1.5rem;
-	width: 100%;
+	width: fit-content;
 }
 
 .startButton:hover {