diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index b6402fe..cdb5790 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -25,13 +25,13 @@
 				<Table.Row>
 					<Table.Cell>
 						<a
-							href={`/${data.data.semester}/${i.student_id}`}
+							href={`/student/${data.data.semester}/${i.student_id}`}
 							class="text-primary underline hover:text-primary/70"
 						>
 							{i.student_id}
 						</a>
 					</Table.Cell>
-					<Table.Cell>{i.grade}</Table.Cell>
+					<Table.Cell>{i.grade ?? 'Not submitted'}</Table.Cell>
 				</Table.Row>
 			{/each}
 		</Table.Body>
diff --git a/web/src/routes/+page.ts b/web/src/routes/+page.ts
index 4724a7e..f423ca5 100644
--- a/web/src/routes/+page.ts
+++ b/web/src/routes/+page.ts
@@ -2,7 +2,7 @@ import type { PageLoad } from './$types';
 
 type GradeInfo = {
 	student_id: string;
-	grade: number;
+	grade: number | null;
 };
 
 type LatestData = {
diff --git a/web/src/routes/homework/[semester]/[homework_name]/+page.svelte b/web/src/routes/homework/[semester]/[homework_name]/+page.svelte
new file mode 100644
index 0000000..cdb5790
--- /dev/null
+++ b/web/src/routes/homework/[semester]/[homework_name]/+page.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	import * as Table from '$lib/components/ui/table';
+
+	let { data }: { data: PageData } = $props();
+</script>
+
+<h1 class="scroll-m-20 text-4xl font-bold tracking-tight lg:text-5xl">
+	{data.data.semester.toUpperCase()}
+	{data.data.name}
+</h1>
+
+<div class="my-6 w-full">
+	<Table.Root>
+		<Table.Header>
+			<Table.Row>
+				<Table.Head>Student ID</Table.Head>
+				<Table.Head>Grade</Table.Head>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			{#each data.data.info as i}
+				<Table.Row>
+					<Table.Cell>
+						<a
+							href={`/student/${data.data.semester}/${i.student_id}`}
+							class="text-primary underline hover:text-primary/70"
+						>
+							{i.student_id}
+						</a>
+					</Table.Cell>
+					<Table.Cell>{i.grade ?? 'Not submitted'}</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
diff --git a/web/src/routes/homework/[semester]/[homework_name]/+page.ts b/web/src/routes/homework/[semester]/[homework_name]/+page.ts
new file mode 100644
index 0000000..3243bad
--- /dev/null
+++ b/web/src/routes/homework/[semester]/[homework_name]/+page.ts
@@ -0,0 +1,24 @@
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+type GradeInfo = {
+	student_id: string;
+	grade: number | null;
+};
+
+export const load: PageLoad = async ({ params, fetch }) => {
+	const res = await fetch(`/api/grade/${params.semester}/${params.homework_name}`);
+	if (!res.ok) {
+		error(res.status, await res.json());
+	}
+
+	const info: GradeInfo[] = await res.json();
+
+	return {
+		data: {
+			semester: params.semester,
+			name: params.homework_name,
+			info
+		}
+	};
+};
diff --git a/web/src/routes/[semester]/[student_id]/+page.svelte b/web/src/routes/student/[semester]/[student_id]/+page.svelte
similarity index 70%
rename from web/src/routes/[semester]/[student_id]/+page.svelte
rename to web/src/routes/student/[semester]/[student_id]/+page.svelte
index 3e545d5..258a354 100644
--- a/web/src/routes/[semester]/[student_id]/+page.svelte
+++ b/web/src/routes/student/[semester]/[student_id]/+page.svelte
@@ -23,8 +23,15 @@
 		<Table.Body>
 			{#each data.data.info as i}
 				<Table.Row>
-					<Table.Cell>{i.name}</Table.Cell>
-					<Table.Cell>{i.grade}</Table.Cell>
+					<Table.Cell>
+						<a
+							href={`/homework/${data.data.semester}/${i.name}`}
+							class="text-primary underline hover:text-primary/70"
+						>
+							{i.name}
+						</a>
+					</Table.Cell>
+					<Table.Cell>{i.grade ?? 'Not submitted'}</Table.Cell>
 				</Table.Row>
 			{/each}
 		</Table.Body>
diff --git a/web/src/routes/[semester]/[student_id]/+page.ts b/web/src/routes/student/[semester]/[student_id]/+page.ts
similarity index 75%
rename from web/src/routes/[semester]/[student_id]/+page.ts
rename to web/src/routes/student/[semester]/[student_id]/+page.ts
index e6c181b..d3c7d60 100644
--- a/web/src/routes/[semester]/[student_id]/+page.ts
+++ b/web/src/routes/student/[semester]/[student_id]/+page.ts
@@ -1,12 +1,17 @@
+import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 type GradeInfo = {
 	name: string;
-	grade: number;
+	grade: number | null;
 };
 
 export const load: PageLoad = async ({ params, fetch }) => {
 	const res = await fetch(`/api/student/${params.semester}/${params.student_id}`);
+	if (!res.ok) {
+		error(res.status, await res.json());
+	}
+
 	const info: GradeInfo[] = await res.json();
 
 	return {