diff --git a/TODO.txt b/TODO.txt
new file mode 100644
index 0000000..62f6a47
--- /dev/null
+++ b/TODO.txt
@@ -0,0 +1,15 @@
+TODO: 
+
+Summary delen:
+- Sette ukentlig mål
+- Endre Period card
+- vise graf for hver øvelse
+
+Hjem skjerm:
+- flere små hurtigknapper
+- Bytte om mellom dager på homepage
+- Dark mode
+- Auth
+
+animasjoner
+gradienter overalt
diff --git a/src/lib/workout/exercises.ts b/src/lib/workout/exercises.ts
index f332fe0..994996e 100644
--- a/src/lib/workout/exercises.ts
+++ b/src/lib/workout/exercises.ts
@@ -93,7 +93,7 @@ function formatTime(seconds: number): string {
 	const remainingSeconds = seconds % 60;
 
 	if (remainingSeconds === 0) return `${minutes} minutes`;
-	return `${minutes}m ${remainingSeconds}s`;
+	return `${minutes}m ${Math.round(remainingSeconds)}s`;
 }
 
 // Get strongly typed entries directly from exerciseConfigs
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 187defb..2111d5f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,11 +4,11 @@
 </script>
 
 <div class="min-h-screen bg-gray-100 py-8">
-	<div class="container mx-auto px-4">
+	<div class="container mx-auto max-w-6xl px-4">
 		<h1 class="mb-8 text-center text-4xl font-bold text-gray-800">🏋️ Egentrening</h1>
 		<p class="mb-8 text-center text-gray-600">Track your daily fitness progress</p>
 
-		<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+		<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
 			<WorkoutDisplay />
 
 			<WorkoutLogger />
diff --git a/src/routes/summary/+page.svelte b/src/routes/summary/+page.svelte
index 13f9c3b..26b6d98 100644
--- a/src/routes/summary/+page.svelte
+++ b/src/routes/summary/+page.svelte
@@ -11,13 +11,13 @@
 	const startPeriod = timePeriods[0];
 	let selectedPeriod = $state<TimePeriod>(startPeriod);
 
-	let workoutSummary = $state((await getWorkoutHistory(startPeriod.days)).data);
+	let workoutSummary = $derived((await getWorkoutHistory(selectedPeriod.days)).data);
 </script>
 
 <div class="mx-auto max-w-4xl p-6">
 	{@render header()}
 
-	<TimePeriodSelector bind:workoutSummary {timePeriods} bind:selectedPeriod />
+	<TimePeriodSelector {timePeriods} bind:selectedPeriod />
 
 	<svelte:boundary>
 		<OverviewCards {workoutSummary} {selectedPeriod} />
diff --git a/src/routes/summary/TimePeriodSelector.svelte b/src/routes/summary/TimePeriodSelector.svelte
index c3c27df..89e9bb6 100644
--- a/src/routes/summary/TimePeriodSelector.svelte
+++ b/src/routes/summary/TimePeriodSelector.svelte
@@ -6,15 +6,15 @@
 	interface Props {
 		timePeriods: TimePeriod[];
 		selectedPeriod: TimePeriod;
-		workoutSummary: WorkoutDataSummary;
 	}
 
-	let { workoutSummary = $bindable(), timePeriods, selectedPeriod = $bindable() }: Props = $props();
+	let { timePeriods, selectedPeriod = $bindable() }: Props = $props();
 
 	async function onPeriodChange(period: TimePeriod) {
 		if (period.label === selectedPeriod.label) return;
-		selectedPeriod = period;
-		workoutSummary = (await getWorkoutHistory(period.days)).data;
+		selectedPeriod.label = period.label;
+		if (period.days === selectedPeriod.days) return;
+		selectedPeriod.days = period.days;
 	}
 </script>
 
diff --git a/src/routes/summary/summaryUtils.ts b/src/routes/summary/summaryUtils.ts
index b2b6c9e..95d9061 100644
--- a/src/routes/summary/summaryUtils.ts
+++ b/src/routes/summary/summaryUtils.ts
@@ -27,22 +27,13 @@ function calculateActualDays(label: string): number {
 
 export type TimePeriod = {
 	label: string;
-	get days(): number;
+	days: number;
 };
 
-function createTimePeriod(label: string): TimePeriod {
-	return {
-		label,
-		get days() {
-			return calculateActualDays(this.label);
-		}
-	};
-}
-
 export const timePeriods: TimePeriod[] = [
-	createTimePeriod('This week'),
-	createTimePeriod('This month'),
-	createTimePeriod('This year')
+	{ label: 'This week', days: calculateActualDays('This week') },
+	{ label: 'This month', days: calculateActualDays('This month') },
+	{ label: 'This year', days: calculateActualDays('This year') }
 ];
 
 /**