diff --git a/src/lib/components/MovieCard.svelte b/src/lib/components/MovieCard.svelte
index a5aa29b..0d6db83 100644
--- a/src/lib/components/MovieCard.svelte
+++ b/src/lib/components/MovieCard.svelte
@@ -11,6 +11,7 @@
 	async function deleteMovie(): Promise<any> {
 		return new Promise(async (resolve, reject) => {
 			try {
+				console.log(`Deleting movie with title: ${movie.title}`)
 				const response: Response = await fetch(`${host}/api/movies`, {
 					method: 'DELETE',
 					headers: {
diff --git a/src/routes/movie/AddMovieForm.svelte b/src/lib/components/MovieForm.svelte
similarity index 51%
rename from src/routes/movie/AddMovieForm.svelte
rename to src/lib/components/MovieForm.svelte
index c474faa..e28cc51 100644
--- a/src/routes/movie/AddMovieForm.svelte
+++ b/src/lib/components/MovieForm.svelte
@@ -1,46 +1,52 @@
 <script lang="ts">
 	import { movieFormInfo, store } from '$lib';
+	import * as Tooltip from '$lib/components/ui/tooltip';
 	import * as Form from '$lib/components/ui/form';
-	import { addSchema } from './schema';
 	import { toast } from 'svelte-sonner';
-	import { goto } from '$app/navigation';
 	import { scale } from 'svelte/transition';
 	import type { SuperValidated } from 'sveltekit-superforms';
-	import type { FormSchema } from './schema';
+	import { goto } from '$app/navigation';
+	import { modifySchema } from '../../routes/movie/[id]/schema';
+	import { addSchema } from '../../routes/movie/schema';
+	export let isModifying: boolean = false;
+	export let movie: Movie | undefined;
+	export let form: SuperValidated<any>;
 	export let errMsg: string = '';
-	export let form: SuperValidated<FormSchema>;
 	export let isValid: boolean | undefined = undefined;
 
 	$: {
 		if (isValid) {
-			toast.success(`Movie ${form.data.title} is now in the watch list`);
+			toast.success(isModifying ? `Movie is now updated` : `Movie added to watch list`);
 			goto('/');
 		}
 		if (isValid != undefined && !isValid) {
-			toast.error(`Failed to add movie ${errMsg}`);
+			toast.error(
+				isModifying ? `Failed to update movie: ${errMsg}` : `Failed to add movie: ${errMsg}`
+			);
 		}
 	}
-
-	store.subscribe((state) => {
-		console.log(`State changes ${JSON.stringify(state)}`);
-		if (state.isProcessing) {
-			console.log(`Showing loading`);
-			toast.loading(`Adding Movie ${form.data.title}`);
-		}
-	});
 </script>
 
-<div in:scale>
+<div in:scale class="mt-10">
 	<div class="flex flex-col items-center md:items-left mb-5">
-		<p class="text-2xl font-bold">Add Movie</p>
-		<p class="text-xl font-semi-bold">Add a movie to your watch list</p>
+		<p class="text-2xl font-bold">{isModifying ? 'Update Movie' : 'Add Movie'}</p>
+		<p class="text-xl font-semi-bold">
+			{isModifying ? `Update Movie ${movie?.title}` : 'Add movie to watch list'}
+		</p>
 	</div>
 
-	<Form.Root class="mx-5" method="POST" {form} schema={addSchema} let:config>
+	<Form.Root
+		class="mx-5"
+		method="POST"
+		{form}
+		schema={isModifying ? modifySchema : addSchema}
+		let:config
+	>
 		<Form.Field {config} name="title">
 			<Form.Item>
 				<Form.Label class="font-bold">Title</Form.Label>
 				<Form.Input placeholder={movieFormInfo[0].description} />
+
 				<Form.Validation />
 			</Form.Item>
 		</Form.Field>
@@ -48,6 +54,7 @@
 			<Form.Item>
 				<Form.Label>Genres</Form.Label>
 				<Form.Input placeholder={movieFormInfo[1].description} />
+
 				<Form.Validation />
 			</Form.Item>
 		</Form.Field>
@@ -55,6 +62,7 @@
 			<Form.Item>
 				<Form.Label>Year of release</Form.Label>
 				<Form.Input placeholder={movieFormInfo[2].description} />
+
 				<Form.Validation />
 			</Form.Item>
 		</Form.Field>
@@ -64,7 +72,7 @@
 				<Form.Select>
 					<Form.SelectTrigger placeholder={movieFormInfo[3].description} />
 					<Form.SelectContent class="overflow-y-auto scrollbar-hide h-40">
-						{#each Array.from({ length: 10 }, (_, index) => index + 1) as option (option)}
+						{#each Array.from({ length: 20 }, (_, index) => (index + 1) * 0.5) as option (option)}
 							<Form.SelectItem value={option.toString()}>{option}</Form.SelectItem>
 						{/each}
 					</Form.SelectContent>
@@ -72,6 +80,24 @@
 				<Form.Validation />
 			</Form.Item>
 		</Form.Field>
-		<Form.Button class="mt-2" formaction="?/addMovie">{`Add to watch list`}</Form.Button>
+		<Form.Field {config} name="watched">
+			<Form.Item class="flex flex-row items-center justify-between rounded-lg">
+				<Form.Label>Have you watched this movie?</Form.Label>
+				<Form.Switch />
+			</Form.Item>
+		</Form.Field>
+		<Tooltip.Root>
+			<Tooltip.Trigger asChild let:builder>
+				<Form.Button
+					builders={[builder]}
+					class="mt-2"
+					formaction={isModifying ? '?/modifyMovie' : '?/addMovie'}
+					>{isModifying ? `Update movie ${movie?.title}` : `Add movie`}</Form.Button
+				>
+			</Tooltip.Trigger>
+			<Tooltip.Content>
+				<p>{isModifying ? 'Update movie' : 'Add movie'}</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
 	</Form.Root>
 </div>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index c8cacf0..751009a 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1 +1,10 @@
-export const prerender = true;
\ No newline at end of file
+import { fetchMovies } from "$lib";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = () => {
+	return {
+		streamed: {
+			movies: fetchMovies()
+		},
+	};
+};
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8fea7fc..6122b18 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,32 +10,21 @@
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { fetchMovies, host, store } from '$lib';
-	import { userPrefersMode } from 'mode-watcher';
+	import type { PageData } from './$types';
 
 	export let pageTitle = 'SvelteKit x MongoDB x shadcn-svelte Movie Watch List';
 	export let pageDescription =
 		'SvelteKit-powered Movie Watchlist: Easily track, rate, and organize your movie choices with this user-friendly app. ';
 	export let pageUrl = host;
-	onMount(() => {
-		try {
-			return store.update((state) => ({
-				...state,
-				movies: fetchMovies()
-			}));
-		} catch (err) {
-			throw error(500, `${JSON.stringify(err)}`);
-		}
-	});
+
+	export let data: PageData;
 </script>
 
 <svelte:head>
 	<title>{pageTitle}</title>
 	<meta name="description" content={pageDescription} />
 	<meta name="author" content="Peter John Arao" />
-	<meta
-		name="keywords"
-		content="SvelteKit Movie watchlist, movie watch list"
-	/>
+	<meta name="keywords" content="SvelteKit Movie watchlist, movie watch list" />
 	<meta name="robots" content="index, follow" />
 	<link rel="canonical" href="{pageUrl}/" />
 	<meta http-equiv="Content-Language" content="en" />
@@ -44,16 +33,13 @@
 	<meta name="apple-mobile-web-app-status-bar-style" content="default" />
 	<meta property="og:description" content={pageDescription} />
 	<meta property="og:url" content="{pageUrl}/" />
-	<meta
-		property="og:image"
-		content={$userPrefersMode === 'dark' ? 'thumbnail-dark.png' : 'thumbnail-light.png'}
-	/>
+	<meta property="og:image" content="thumbnail.png" />
 	<meta property="og:type" content="website" />
 	<meta property="og:site_name" content={pageTitle} />
 </svelte:head>
 
 <div in:fade>
-	{#await $store.movies}
+	{#await data.streamed.movies}
 		<div class="grid place-items-center grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 m-4">
 			{#each Array.from({ length: 6 }, (_, index) => index + 1) as option (option)}
 				<Card.Root class="w-full">
diff --git a/src/routes/api/movies/+server.ts b/src/routes/api/movies/+server.ts
index 56a461e..41f6d80 100644
--- a/src/routes/api/movies/+server.ts
+++ b/src/routes/api/movies/+server.ts
@@ -212,7 +212,7 @@ export const DELETE: RequestHandler = async ({ request }) => {
 			.then((fetchedMovie: Document) => {
 				if (!fetchedMovie) {
 					return new Response(
-						JSON.stringify({ errorMesage: `Movie with id ${id} is not a movie document!` }),
+						JSON.stringify({ errorMessage: `Movie with id ${id} is not a movie document!` }),
 						{
 							status: 400,
 							headers: {
@@ -268,7 +268,7 @@ export const DELETE: RequestHandler = async ({ request }) => {
 						);
 					})
 					.catch((error: MongoServerError) => {
-						return new Response(JSON.stringify({ errorMesage: error.message }), {
+						return new Response(JSON.stringify({ errorMessage: error.message }), {
 							status: 500,
 							headers: {
 								'Access-Control-Allow-Origin': '*',
@@ -281,7 +281,7 @@ export const DELETE: RequestHandler = async ({ request }) => {
 				() =>
 					new Response(
 						JSON.stringify({
-							errorMesage: `Cannot delete movie, movie with id ${id} does not exist`
+							errorMessage: `Cannot delete movie, movie with id ${id} does not exist`
 						}),
 						{
 							status: 404,
@@ -293,7 +293,7 @@ export const DELETE: RequestHandler = async ({ request }) => {
 					)
 			);
 	} catch {
-		return new Response(JSON.stringify({ errorMesage: 'Cannot delete movie, invalid body' }), {
+		return new Response(JSON.stringify({ errorMessage: 'Cannot delete movie, invalid body' }), {
 			status: 404,
 			headers: {
 				'Access-Control-Allow-Origin': '*',
@@ -308,7 +308,7 @@ export const PATCH: RequestHandler = async (event) => {
 
 	if (requestOrigin && !allowedOrigins.includes(requestOrigin)) {
 		return new Response(
-			JSON.stringify({ errorMesage: `Origin ${requestOrigin} is not authorized` }),
+			JSON.stringify({ errorMessage: `Origin ${requestOrigin} is not authorized` }),
 			{
 				status: 401,
 				headers: {
@@ -388,7 +388,7 @@ export const PATCH: RequestHandler = async (event) => {
 			})
 			.catch((error: MongoServerError) => {
 				return new Response(
-					JSON.stringify({ errorMesage: `Failed to update movie ${data.title}: ${error.message}` }),
+					JSON.stringify({ errorMessage: `Failed to update movie ${data.title}: ${error.message}` }),
 					{
 						status: 400,
 						headers: {
diff --git a/src/routes/movie/+page.server.ts b/src/routes/movie/+page.server.ts
index 29e9205..d0f1c65 100644
--- a/src/routes/movie/+page.server.ts
+++ b/src/routes/movie/+page.server.ts
@@ -1,8 +1,8 @@
 import type { PageServerLoad } from './$types';
 import { superValidate } from 'sveltekit-superforms/server';
 import { addSchema } from './schema';
-import { fail, type Actions, type RequestEvent } from '@sveltejs/kit';
-import { host, store } from '$lib';
+import { fail, type Actions } from '@sveltejs/kit';
+import { host } from '$lib';
 
 export const load = (() => {
 	return {
@@ -21,16 +21,11 @@ export const actions: Actions = {
 
 		if (!form.valid) {
 			return fail(400, {
-				form
+				form,
+				movie: undefined
 			});
 		}
 
-		store.update((state) => ({
-			...state,
-			movie: form.data.title,
-			isProcessing: true
-		}));
-
 		const genres: string[] = form.data.genres.split(' ')
 			.map((genre) => genre)
 
@@ -54,25 +49,18 @@ export const actions: Actions = {
 			});
 			const res = await response.json();
 
-			store.update((state) => ({
-				...state,
-				isProcessing: false
-			}));
-
 			return {
 				form,
 				result: res,
+				movie: undefined,
 				valid: response.ok,
 				errorMessage: res.errorMessage
 			};
 
 		} catch (error: any) {
-			store.update((state) => ({
-				...state,
-				isProcessing: false
-			}));
 			return {
 				form,
+				movie: undefined,
 				valid: false,
 				errorMessage: error.message
 			};
diff --git a/src/routes/movie/+page.svelte b/src/routes/movie/+page.svelte
index e018731..315cc6a 100644
--- a/src/routes/movie/+page.svelte
+++ b/src/routes/movie/+page.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import type { PageData, ActionData } from './$types';
-	import AddMovieForm from './AddMovieForm.svelte';
+	import MovieForm from '$lib/components/MovieForm.svelte';
 	export let data: PageData;
 	export let form: ActionData;
 </script>
 
-<AddMovieForm 
+<MovieForm 
+	movie={form?.movie}
 	form={data.form} 
 	isValid={form?.valid} 
-	errMsg={form?.errorMessage} 
+	errMsg={form?.errorMessage}
 />
diff --git a/src/routes/movie/[id]/+page.server.ts b/src/routes/movie/[id]/+page.server.ts
index 79128f1..ac2a669 100644
--- a/src/routes/movie/[id]/+page.server.ts
+++ b/src/routes/movie/[id]/+page.server.ts
@@ -2,7 +2,7 @@ import type { PageServerLoad } from './$types';
 import { superValidate } from 'sveltekit-superforms/server';
 import { fail, type Actions, type RequestEvent, error } from '@sveltejs/kit';
 import { genres, getDocumentById, movies } from '$db/collections';
-import { fetchMovies, host, mapFetchedGenreToType, mapFetchedMovieToType, store } from '$lib';
+import { fetchMovies, host, mapFetchedGenreToType, mapFetchedMovieToType } from '$lib';
 import type { Document, MongoServerError } from 'mongodb';
 import { modifySchema } from './schema';
 
@@ -32,11 +32,18 @@ export const load = (async (event: RequestEvent) => {
 				: { ...movie, _id: movie._id.toString() };
 
 			console.log(`Movie with appropriate genres: ${JSON.stringify(updatedMovie)}`);
+			let form = await superValidate(modifySchema, {
+				id: 'modifySchema'
+			});
+
+			form.data.title = updatedMovie.title;
+			form.data.genres = updatedMovie.genres.join(' ');
+			form.data.year = updatedMovie.year.toString();
+			form.data.rating = updatedMovie.rating.toString();
+			form.data.watched = updatedMovie.watched;
 			return {
 				movie: updatedMovie,
-				form: await superValidate(modifySchema, {
-					id: 'modifySchema'
-				})
+				form: form
 			};
 		})
 		.catch((e: MongoServerError) => {
@@ -50,12 +57,6 @@ export const actions: Actions = {
 			id: 'modifySchema'
 		});
 
-		store.update((state) => ({
-			...state,
-			movie: form.data.title,
-			isProcessing: true
-		}));
-
 		if (!form.valid) {
 			return fail(400, {
 				form,
@@ -85,11 +86,6 @@ export const actions: Actions = {
 			});
 			const res = await response.json();
 
-			store.update((state) => ({
-				...state,
-				isProcessing: false
-			}));
-
 			return {
 				form,
 				result: res,
@@ -97,10 +93,6 @@ export const actions: Actions = {
 				errorMessage: res.errorMessage
 			};
 		} catch (error: any) {
-			store.update((state) => ({
-				...state,
-				isProcessing: false
-			}));
 			return {
 				form,
 				valid: false,
diff --git a/src/routes/movie/[id]/+page.svelte b/src/routes/movie/[id]/+page.svelte
index 0b49844..a76fed6 100644
--- a/src/routes/movie/[id]/+page.svelte
+++ b/src/routes/movie/[id]/+page.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
+	import MovieForm from '$lib/components/MovieForm.svelte';
 	import type { PageData, ActionData } from './$types';
-	import UpdateMovieForm from './UpdateMovieForm.svelte';
 	export let data: PageData;
 	export let form: ActionData;
 </script>
 
-<UpdateMovieForm
+<MovieForm 
 	movie={data.movie}
-	form={data.form}
+	form={data.form} 
 	isValid={form?.valid} 
 	errMsg={form?.errorMessage} 
-/>
+	isModifying={true}
+/>
\ No newline at end of file
diff --git a/src/routes/movie/[id]/UpdateMovieForm.svelte b/src/routes/movie/[id]/UpdateMovieForm.svelte
deleted file mode 100644
index 65e214c..0000000
--- a/src/routes/movie/[id]/UpdateMovieForm.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script lang="ts">
-	import { movieFormInfo, store } from '$lib';
-	import * as Tooltip from '$lib/components/ui/tooltip';
-	import * as Form from '$lib/components/ui/form';
-	import { toast } from 'svelte-sonner';
-	import { scale } from 'svelte/transition';
-	import type { SuperValidated } from 'sveltekit-superforms';
-	import { modifySchema, type FormSchema } from './schema';
-	import { goto } from '$app/navigation';
-	export let movie: Movie;
-	export let form: SuperValidated<FormSchema>;
-	export let errMsg: string = '';
-	export let isValid: boolean | undefined = undefined;
-
-	$: {
-		store.subscribe((state) => {
-			if (isValid) {
-				toast.success(`Movie ${state.movie} is now updated`);
-				goto('/');
-			}
-			if (isValid != undefined && !isValid) {
-				toast.error(`Failed to add movie: ${errMsg}`);
-			}
-			if (state.isProcessing) {
-				toast.loading(`Updating Movie ${form.data.title}`);
-			}
-		});
-	}
-</script>
-
-<div in:scale>
-	<div class="flex flex-col items-center md:items-left mb-5">
-		<p class="text-2xl font-bold">Update Movie</p>
-		<p class="text-xl font-semi-bold">{`Update Movie ${movie.title}`}</p>
-	</div>
-
-	<Form.Root class="mx-5" method="POST" {form} schema={modifySchema} let:config>
-		<Form.Field {config} name="title">
-			<Form.Item>
-				<Form.Label class="font-bold">Title</Form.Label>
-				<Form.Input placeholder={movieFormInfo[0].description} value={movie.title} />
-
-				<Form.Validation />
-			</Form.Item>
-		</Form.Field>
-		<Form.Field {config} name="genres">
-			<Form.Item>
-				<Form.Label>Genres</Form.Label>
-				<Form.Input placeholder={movieFormInfo[1].description} value={movie.genres.join(' ')} />
-
-				<Form.Validation />
-			</Form.Item>
-		</Form.Field>
-		<Form.Field {config} name="year">
-			<Form.Item>
-				<Form.Label>Year of release</Form.Label>
-				<Form.Input placeholder={movieFormInfo[2].description} value={movie.year} />
-
-				<Form.Validation />
-			</Form.Item>
-		</Form.Field>
-		<Form.Field {config} name="rating">
-			<Form.Item>
-				<Form.Label class="font-bold">Rating</Form.Label>
-				<Form.Select>
-					<Form.SelectTrigger placeholder={movieFormInfo[3].description} />
-					<Form.SelectContent class="overflow-y-auto scrollbar-hide h-40">
-						{#each Array.from({ length: 10 }, (_, index) => index + 1) as option (option)}
-							<Form.SelectItem value={movie.rating.toString()}>{option}</Form.SelectItem>
-						{/each}
-					</Form.SelectContent>
-				</Form.Select>
-				<Form.Validation />
-			</Form.Item>
-		</Form.Field>
-		<Tooltip.Root>
-			<Tooltip.Trigger asChild let:builder>
-				<Form.Button builders={[builder]} class="mt-2" formaction="?/modifyMovie"
-					>{`Update movie ${movie.title}`}</Form.Button
-				>
-			</Tooltip.Trigger>
-			<Tooltip.Content>
-				<p>Update movie</p>
-			</Tooltip.Content>
-		</Tooltip.Root>
-	</Form.Root>
-</div>
diff --git a/src/routes/movie/[id]/schema.ts b/src/routes/movie/[id]/schema.ts
index ab7ac9a..b5d2420 100644
--- a/src/routes/movie/[id]/schema.ts
+++ b/src/routes/movie/[id]/schema.ts
@@ -6,9 +6,7 @@ export const modifySchema = z.object({
 		.string()
 		.min(2, { message: 'Title must be at least 2 characters long' })
 		.max(50, { message: 'Title cannot exceed 50 characters' }),
-	genres: z
-		.string()
-		.min(3, { message: 'Genre must be at least 3 characters long' }),
+	genres: z.string().min(3, { message: 'Genre must be at least 3 characters long' }),
 	year: z
 		.string()
 		.min(4, { message: 'Year must be at least 4 characters long' })
@@ -17,15 +15,16 @@ export const modifySchema = z.object({
 				if (isNaN(Number(value))) {
 					throw error(400, 'Year must be a number');
 				}
-				return Number(value) >= 1900 && Number(value) <= new Date().getFullYear();
+				return Number(value) >= 1888 && Number(value) <= new Date().getFullYear();
 			},
-			{ message: 'Year must be between 1900 and current year' }
+			{ message: 'Year must be between 1888 and current year' }
 		),
 	rating: z
 		.string()
 		.min(1, { message: 'Rating must be at least 1 characters long' })
 		.max(10, { message: 'Rating cannot exceed 10 characters' }),
-	movieId: z.string()
+	movieId: z.string(),
+	watched: z.boolean()
 });
 
 export type FormSchema = typeof modifySchema;
diff --git a/src/routes/movie/schema.ts b/src/routes/movie/schema.ts
index 9305d22..d734691 100644
--- a/src/routes/movie/schema.ts
+++ b/src/routes/movie/schema.ts
@@ -17,14 +17,15 @@ export const addSchema = z.object({
 				if (isNaN(Number(value))) {
 					throw error(400, 'Year must be a number');
 				}
-				return Number(value) >= 1900 && Number(value) <= new Date().getFullYear();
+				return Number(value) >= 1888 && Number(value) <= new Date().getFullYear();
 			},
-			{ message: 'Year must be between 1900 and current year' }
+			{ message: 'Year must be between 1888 and current year' }
 		),
 	rating: z
 		.string()
 		.min(1, { message: 'Rating must be at least 1 characters long' })
-		.max(10, { message: 'Rating cannot exceed 10 characters' })
+		.max(10, { message: 'Rating cannot exceed 10 characters' }),
+	watched: z.boolean()
 });
 
 export type FormSchema = typeof addSchema;
diff --git a/static/thumbnail-dark.png b/static/thumbnail-dark.png
deleted file mode 100644
index c551d07..0000000
Binary files a/static/thumbnail-dark.png and /dev/null differ
diff --git a/static/thumbnail-light.png b/static/thumbnail-light.png
deleted file mode 100644
index 25b9283..0000000
Binary files a/static/thumbnail-light.png and /dev/null differ
diff --git a/static/thumbnail.png b/static/thumbnail.png
new file mode 100644
index 0000000..ef06aa8
Binary files /dev/null and b/static/thumbnail.png differ
diff --git a/svelte.config.js b/svelte.config.js
index cb537ad..43c3da0 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -3,14 +3,9 @@ import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-	// for more information about preprocessors
 	preprocess: [vitePreprocess({})],
 	runtime: 'edge',
 	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
 		alias: {
 			$lib: './src/lib',