diff --git a/src/lib/components/AppSidebar.svelte b/src/lib/components/AppSidebar.svelte
index 380cc23..1aaae01 100644
--- a/src/lib/components/AppSidebar.svelte
+++ b/src/lib/components/AppSidebar.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
+	import { removeClassID } from '$lib';
 	import { loadStudentInfo } from '$lib/cache';
-	import { studentInfo } from '$lib/stores';
+	import { gradebook, studentInfo } from '$lib/stores';
 	import {
 		Sidebar,
 		SidebarBrand,
@@ -15,9 +16,12 @@
 		AnnotationOutline,
 		ArrowRightToBracketOutline,
 		BellOutline,
+		ChevronDownOutline,
+		ChevronUpOutline,
 		FileLinesOutline,
 		FolderOpenOutline,
 		MailBoxOutline,
+		MapPinAltOutline,
 		UserCircleOutline
 	} from 'flowbite-svelte-icons';
 
@@ -30,7 +34,7 @@
 </script>
 
 <Sidebar activeUrl={$page.url.pathname} class="h-screen">
-	<SidebarWrapper class="h-screen flex flex-col justify-between">
+	<SidebarWrapper class="h-screen flex flex-col justify-between gap-2">
 		<SidebarGroup>
 			<SidebarBrand
 				site={{
@@ -40,11 +44,49 @@
 				}}
 			/>
 
-			<SidebarItem label="Grades" href="/grades">
-				<svelte:fragment slot="icon">
-					<AddressBookOutline class="focus:outline-none" />
-				</svelte:fragment>
-			</SidebarItem>
+			{#if $page.url.pathname.startsWith('/grades')}
+				<li class="bg-gray-900 rounded-lg">
+					<a
+						href="/grades"
+						class="flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
+					>
+						<AddressBookOutline class="focus:outline-none" />
+						<span class="ms-3">Grades</span>
+						{#if $page.params.index}
+							<ChevronUpOutline />
+						{:else}
+							<ChevronDownOutline />
+						{/if}
+					</a>
+					{#if $page.params.index}
+						<ul>
+							{#each $gradebook?.Courses.Course ?? [] as { _Title: title }, index}
+								<li>
+									<a
+										href={`/grades/${index.toString()}`}
+										class="flex items-center p-2 w-full text-base font-normal text-gray-90 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+									>
+										<MapPinAltOutline
+											class={$page.params.index !== index.toString()
+												? 'opacity-0 transition'
+												: 'transition'}
+										/>
+										<span class="ml-3">
+											{removeClassID(title)}
+										</span>
+									</a>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				</li>
+			{:else}
+				<SidebarItem label="Grades" href="/grades">
+					<svelte:fragment slot="icon">
+						<AddressBookOutline class="focus:outline-none" />
+					</svelte:fragment>
+				</SidebarItem>
+			{/if}
 
 			<SidebarItem label="Attendance" href="/attendance">
 				<svelte:fragment slot="icon">
diff --git a/src/routes/(authed)/grades/+page.svelte b/src/routes/(authed)/grades/+page.svelte
index 7a45e87..b413b78 100644
--- a/src/routes/(authed)/grades/+page.svelte
+++ b/src/routes/(authed)/grades/+page.svelte
@@ -2,7 +2,7 @@
 	import { getColorForGrade, removeClassID } from '$lib';
 	import { gradebook, gradebookLoaded, studentAccount } from '$lib/stores';
 	import { Button, Card, Dropdown, DropdownItem, Progressbar } from 'flowbite-svelte';
-	import { ChevronDownOutline, ChevronUpOutline, MapPinOutline } from 'flowbite-svelte-icons';
+	import { ChevronDownOutline, ChevronUpOutline, MapPinAltOutline } from 'flowbite-svelte-icons';
 
 	let dropdownOpen = false;
 
@@ -25,23 +25,21 @@
 
 {#if $gradebook}
 	<div class="m-4 flex flex-col justify-center">
-		<div class="flex justify-center">
-			<Button color="light" on:click={showDropdown}>
-				{$gradebook.ReportingPeriod._GradePeriod}
+		<Button color="light" on:click={showDropdown} class="mx-auto flex items-center">
+			{$gradebook.ReportingPeriod._GradePeriod}
 
-				{#if dropdownOpen}
-					<ChevronUpOutline size="xs" class="ml-2 focus:outline-none" />
-				{:else}
-					<ChevronDownOutline size="xs" class="ml-2 focus:outline-none" />
-				{/if}
-			</Button>
-		</div>
+			{#if dropdownOpen}
+				<ChevronUpOutline size="sm" class="ml-2 focus:outline-none" />
+			{:else}
+				<ChevronDownOutline size="sm" class="ml-2 focus:outline-none" />
+			{/if}
+		</Button>
 
 		<Dropdown bind:open={dropdownOpen}>
 			{#each $gradebook.ReportingPeriods.ReportPeriod ?? [] as period, index}
 				<DropdownItem on:click={() => changeReportPeriod(index)} class="flex items-center">
 					{#if period._GradePeriod == $gradebook.ReportingPeriod._GradePeriod}
-						<MapPinOutline size="sm" class="mr-2" />
+						<MapPinAltOutline size="sm" class="mr-2" />
 					{/if}
 					{period._GradePeriod}
 				</DropdownItem>
@@ -50,7 +48,7 @@
 	</div>
 
 	<ol class="space-y-4 p-4 pt-0">
-		{#each $gradebook.Courses.Course ?? [] as {_Title: title, Marks: { Mark: {_CalculatedScoreString: grade, _CalculatedScoreRaw: percent}}}, index}
+		{#each $gradebook.Courses.Course ?? [] as { _Title: title, Marks: { Mark: { _CalculatedScoreString: grade, _CalculatedScoreRaw: percent } } }, index}
 			<li>
 				<Card
 					class="dark:text-white text-xl max-w-none flex flex-row justify-between items-center"