diff --git a/bun.lockb b/bun.lockb
new file mode 100755
index 0000000..005bfad
Binary files /dev/null and b/bun.lockb differ
diff --git a/package.json b/package.json
index b0aed5c..bd9cc91 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
 		"@supabase/supabase-js": "^2.44.4",
 		"bits-ui": "^0.21.12",
 		"clsx": "^2.1.1",
+		"mode-watcher": "^0.4.1",
 		"tailwind-merge": "^2.4.0",
 		"tailwind-variants": "^0.2.1"
 	}
diff --git a/src/lib/engineer.ts b/src/lib/engineer.ts
index b596a71..0e48720 100644
--- a/src/lib/engineer.ts
+++ b/src/lib/engineer.ts
@@ -1,7 +1,7 @@
 // Implements the schedule engineering algorithm
 
 import { sum } from 'lodash-es';
-import { type VirtualSchedule, PERIODS, type UnfinishedSchedule } from './InfoInput';
+import { type VirtualSchedule, PERIODS, type UnfinishedSchedule } from './InfoInput.d';
 import { setDifference, type ArrElement } from './utils';
 function scheduleToClassSet(schedule: VirtualSchedule) {
 	const classSet = new Set<string>();
@@ -16,7 +16,7 @@ function scheduleToClassSet(schedule: VirtualSchedule) {
 function findCommonClasses(schedules: VirtualSchedule[]) {
 	const classSets = schedules.map(scheduleToClassSet);
 	const commonClasses = new Set<string>();
-	for (const className of classSets[0]) {
+	for (const className of classSets) {
 		if (classSets.every((classSet) => classSet.has(className))) {
 			commonClasses.add(className);
 		}
@@ -35,7 +35,7 @@ function scheduleMovementHeuristic(a: VirtualSchedule, b: VirtualSchedule) {
 // still move the D&A class to the same time as he does.
 // TODO: In the future, we will respect the restrictions of which
 // periods each class can be in
-function findOptimumSchedules(schedules: VirtualSchedule[]): VirtualSchedule[] {
+export function findOptimumSchedules(schedules: VirtualSchedule[]): VirtualSchedule[] {
 	const commonClasses = findCommonClasses(schedules);
 	function cost(schedule: VirtualSchedule) {
 		return sum(schedules.map((x) => scheduleMovementHeuristic(schedule, x)));
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 61fa188..faca673 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,17 @@
 <script>
 	import '../app.css';
 	import Downtime from '$lib/Downtime.svelte';
+	import { onMount } from 'svelte';
+	import { ModeWatcher } from 'mode-watcher';
+
+	let theme = 'light';
+	onMount(() => {
+		const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+		theme = mediaQueryList.matches ? 'dark' : 'light';
+		mediaQueryList.addEventListener('change', (e) => {
+			theme = e.matches ? 'dark' : 'light';
+		});
+	});
 </script>
 
 <div class="w-full text-center py-5 px-7 text-2xl font-bold bg-black">
@@ -9,8 +20,11 @@
 		learn more)
 	</a>
 </div>
+<main data-theme={theme}>
+	<ModeWatcher />
+	<slot />
+</main>
 
-<slot />
 <footer class="footer items-center p-4 bg-neutral text-neutral-content">
 	<div class="items-center grid-flow-col">
 		<p>
diff --git a/src/routes/room/+error.svelte b/src/routes/room/[room=uuid]/+error.svelte
similarity index 100%
rename from src/routes/room/+error.svelte
rename to src/routes/room/[room=uuid]/+error.svelte
diff --git a/src/routes/room/[room=uuid]/+page.svelte b/src/routes/room/[room=uuid]/+page.svelte
index 531ac49..f1cac2b 100644
--- a/src/routes/room/[room=uuid]/+page.svelte
+++ b/src/routes/room/[room=uuid]/+page.svelte
@@ -242,7 +242,7 @@
 		</div>
 	</div>
 </div>
-<Tabs.Root value="engineer">
+<Tabs.Root value="schedules" class="min-h-[60vh]">
 	<!-- <Tabs.List> -->
 	{#if you === 'tentative'}
 		<div class="flex w-full justify-center space-x-4">
@@ -258,7 +258,7 @@
 		<Tabs.List class="grid w-3/4 mx-auto grid-cols-3">
 			<Tabs.Trigger value="schedules">All Schedules</Tabs.Trigger>
 			<Tabs.Trigger value="filter">Filter</Tabs.Trigger>
-			<Tabs.Trigger value="engineer">Schedule Engineer</Tabs.Trigger>
+			<Tabs.Trigger value="engineer" disabled>Schedule Engineer</Tabs.Trigger>
 		</Tabs.List>
 	{/if}
 	<Tabs.Content value="schedules">
@@ -269,7 +269,9 @@
 			<Search {you} {getClass} schedules={$schedules}></Search>
 		{/if}
 	</Tabs.Content>
-	<Tabs.Content value="engineer"><Engineer /></Tabs.Content>
+	<Tabs.Content value="engineer">
+		<Engineer {schedules} {getClass} />
+	</Tabs.Content>
 </Tabs.Root>
 
 <Realtime {realtimeStatus} />
diff --git a/src/routes/room/[room=uuid]/Engineer.svelte b/src/routes/room/[room=uuid]/Engineer.svelte
index 26b4658..380a0cc 100644
--- a/src/routes/room/[room=uuid]/Engineer.svelte
+++ b/src/routes/room/[room=uuid]/Engineer.svelte
@@ -1,4 +1,19 @@
-<script>
+<script lang="ts">
+	import type { Schedule } from '$lib/InfoInput';
+	import Fuse from 'fuse.js';
+	import type { Writable } from 'svelte/store';
+	import ViewSchedule from './ViewSchedule.svelte';
+	import ScheduleDisplay from './ScheduleDisplay.svelte';
+	import { findOptimumSchedules } from '$lib/engineer';
+
+	export let schedules: Writable<Schedule[]>;
+	export let getClass: (klass: string) => Promise<Class>;
+	let searchQuery = '';
+	let students: Schedule[] = [];
+	$: fuse = new Fuse($schedules, { keys: ['student'] });
+	$: filtered = searchQuery ? fuse.search(searchQuery).map((x) => x.item) : $schedules;
+	$: found = filtered.length === 1;
+	$: console.log(findOptimumSchedules(students));
 </script>
 
 <div class="flex justify-center">
@@ -17,22 +32,50 @@
 	</div>
 </div>
 <div class="w-3/4 mx-auto bg-base-200 rounded-box p-5 shadow-lg">
-	<div class="join">
-		<label class="input input-bordered flex items-center gap-2 join-item">
-			<input type="text" class="grow" placeholder="Search" />
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 16 16"
-				fill="currentColor"
-				class="h-4 w-4 opacity-70"
+	<div class="dropdown">
+		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+		<div class="join" tabindex="0">
+			<label class="input input-bordered flex items-center gap-2 join-item">
+				<input type="text" class="grow" placeholder="Search" bind:value={searchQuery} />
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 16 16"
+					fill="currentColor"
+					class="h-4 w-4 opacity-70"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</label>
+			<button
+				class="btn btn-primary join-item"
+				disabled={!found}
+				on:click={() => {
+					students = [...students, filtered[0]];
+					searchQuery = '';
+				}}>Add Student</button
 			>
-				<path
-					fill-rule="evenodd"
-					d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</label>
-		<button class="btn btn-primary join-item">Add Student</button>
+		</div>
+		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+		<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+			{#each filtered as schedule (schedule.student)}
+				<li>
+					<span
+						on:click={() => {
+							searchQuery = schedule.student;
+						}}>{schedule.student}</span
+					>
+				</li>
+			{:else}
+				<p class="p-3">No results found</p>
+			{/each}
+		</ul>
 	</div>
 </div>
+<div>
+	<p>{JSON.stringify(students)}</p>
+	<!-- <ViewSchedule {students} /> -->
+</div>
diff --git a/src/routes/room/[room=uuid]/ViewSchedules.svelte b/src/routes/room/[room=uuid]/ViewSchedules.svelte
index 5629106..cb59dad 100644
--- a/src/routes/room/[room=uuid]/ViewSchedules.svelte
+++ b/src/routes/room/[room=uuid]/ViewSchedules.svelte
@@ -51,7 +51,7 @@
 			>
 				{schedule.student}
 			</button>
-		{:else if you === null}
+		{:else if you == null}
 			<p>Please input who you are first</p>
 		{:else if (onlyMatching && matches(you.schedule, schedule)) || !onlyMatching}
 			<ViewSchedule {schedule} {you} {getClass} />
diff --git a/supabase/config.toml b/supabase/config.toml
index 9924956..d4d7592 100644
--- a/supabase/config.toml
+++ b/supabase/config.toml
@@ -4,7 +4,7 @@ project_id = "Wuzursched"
 
 [api]
 # Port to use for the API URL.
-port = 54321
+port = 44321
 # Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
 # endpoints. public and storage are always included.
 schemas = ["public", "storage", "graphql_public"]
@@ -16,22 +16,22 @@ max_rows = 1000
 
 [db]
 # Port to use for the local database URL.
-port = 54322
+port = 44322
 # Port used by db diff command to initialise the shadow database.
-shadow_port = 54320
+shadow_port = 44320
 # The database major version to use. This has to be the same as your remote database's. Run `SHOW
 # server_version;` on the remote database to check.
 major_version = 15
 [db.pooler]
 enabled = false
-port = 54329
+port = 44329
 pool_mode = "transaction"
 default_pool_size = 15
 max_client_conn = 100
 [studio]
 enabled = true
 # Port to use for Supabase Studio.
-port = 54323
+port = 44323
 # External URL of the API server that frontend connects to.
 api_url = "http://localhost"
 
@@ -40,10 +40,10 @@ api_url = "http://localhost"
 [inbucket]
 enabled = true
 # Port to use for the email testing server web interface.
-port = 54324
+port = 44324
 # Uncomment to expose additional ports for testing user applications that send emails.
-# smtp_port = 54325
-# pop3_port = 54326
+# smtp_port = 44325
+# pop3_port = 44326
 
 [storage]
 # The maximum file size allowed (e.g. "5MB", "500KB").
@@ -104,7 +104,7 @@ url = ""
 
 [analytics]
 enabled = false
-port = 54327
-vector_port = 54328
+port = 44327
+vector_port = 44328
 # Configure one of the supported backends: `postgres`, `bigquery`
 backend = "postgres"
diff --git a/tailwind.config.js b/tailwind.config.js
index 56f0e1b..3611f16 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@ import { fontFamily } from 'tailwindcss/defaultTheme';
 import daisyui from 'daisyui';
 /** @type {import('tailwindcss').Config} */
 const config = {
-	darkMode: ['class'],
+	// darkMode: 'media',
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	safelist: ['dark'],
 	theme: {