diff --git a/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte b/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte
index 9982b2f..1c40628 100644
--- a/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte
+++ b/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte
@@ -8,6 +8,7 @@
 	export let catchRecord: CatchRecord;
 	export let showOrigins: boolean;
 	export let showForms: boolean;
+	export let showShiny: boolean;
 
 	const dispatch = createEventDispatcher();
 
@@ -26,6 +27,7 @@
 					pokemonName={pokedexEntry.pokemon}
 					pokedexNumber={pokedexEntry.pokedexNumber}
 					form={pokedexEntry.form}
+					shiny={showShiny}
 				/>
 			</div>
 			<div class="pl-2">
diff --git a/src/lib/components/pokedex/PokedexViewList.svelte b/src/lib/components/pokedex/PokedexViewList.svelte
new file mode 100644
index 0000000..d855029
--- /dev/null
+++ b/src/lib/components/pokedex/PokedexViewList.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import PokedexEntryCatchRecord from './PokedexEntryCatchRecord.svelte';
+	import type { CombinedData } from '$lib/models/CombinedData';
+
+	export let showOrigins = true;
+	export let showForms = true;
+	export let showShiny = false;
+	export let combinedData: CombinedData[] | null;
+	export let creatingRecords = false;
+	export let totalRecordsCreated = 0;
+	export let failedToLoad = false;
+	export let updateACatch = (event: any) => {};
+	export let createCatchRecords = () => {};
+</script>
+
+<main class="flex-1 p-4 w-full">
+	<div class="max-w-min mx-auto">
+		{#if combinedData && combinedData.length > 0}
+			{#each combinedData as { pokedexEntry, catchRecord }}
+				<PokedexEntryCatchRecord
+					{pokedexEntry}
+					{showOrigins}
+					{showForms}
+					{showShiny}
+					bind:catchRecord
+					on:updateCatch={updateACatch}
+				/>
+			{/each}
+		{:else if failedToLoad}
+			{#if creatingRecords && totalRecordsCreated > 0}
+				<p>Processed {totalRecordsCreated} Pokédex entries so far...</p>
+				<p>Please be patient, this may take some time.</p>
+			{:else if creatingRecords}
+				<p>Processing...</p>
+				<p>Please be patient, this may take some time.</p>
+			{:else}
+				<h1>Failed to load</h1>
+				<p>
+					If you're seeing this, you probably haven't created your Pokédex data yet. Please do so by
+					clicking this button.
+				</p>
+				<button class="btn" on:click={createCatchRecords}>Create Pokédex data</button>
+			{/if}
+		{:else}
+			<div class="min-w-max mx-auto">
+				<h1>Loading Pokédex</h1>
+				<span class="loading loading-spinner loading-xl"></span>
+			</div>
+		{/if}
+	</div>
+</main>
diff --git a/src/routes/mydex/+page.svelte b/src/routes/mydex/+page.svelte
index 4f927bd..8701fa7 100644
--- a/src/routes/mydex/+page.svelte
+++ b/src/routes/mydex/+page.svelte
@@ -8,6 +8,8 @@
 	import Pagination from '$lib/components/Pagination.svelte';
 	import { browser } from '$app/environment';
 	import type { PokedexEntry } from '$lib/models/PokedexEntry';
+	import PokedexSidebar from '$lib/components/pokedex/PokedexSidebar.svelte';
+	import PokedexViewList from '$lib/components/pokedex/PokedexViewList.svelte';
 
 	let combinedData = null as CombinedData[] | null;
 	let currentPage = 1 as number;
@@ -27,6 +29,7 @@
 
 	let showOrigins = true;
 	let showForms = true;
+	let showShiny = false;
 	let drawerOpen = false;
 
 	function toggleOrigins() {
@@ -38,6 +41,15 @@
 		await getData();
 	}
 
+	async function toggleShiny() {
+		showShiny = !showShiny;
+		if (showShiny) {
+			showForms = false;
+		}
+
+		await getData();
+	}
+
 	async function getData() {
 		combinedData = null;
 
@@ -162,139 +174,31 @@
 			>
 				{drawerOpen ? 'Close Filters' : 'Open Filters'}
 			</label>
-			<main class="flex-1 p-4 w-full">
-				<div class="max-w-min mx-auto">
-					{#if combinedData && combinedData.length > 0}
-						{#each combinedData as { pokedexEntry, catchRecord }}
-							<PokedexEntryCatchRecord
-								{pokedexEntry}
-								{showOrigins}
-								{showForms}
-								bind:catchRecord
-								on:updateCatch={updateACatch}
-							/>
-						{/each}
-					{:else if failedToLoad}
-						{#if creatingRecords && totalRecordsCreated > 0}
-							<p>Processed {totalRecordsCreated} Pokédex entries so far...</p>
-							<p>Please be patient, this may take some time.</p>
-						{:else if creatingRecords}
-							<p>Processing...</p>
-							<p>Please be patient, this may take some time.</p>
-						{:else}
-							<h1>Failed to load</h1>
-							<p>
-								If you're seeing this, you probably haven't created your Pokédex data yet. Please do
-								so by clicking this button.
-							</p>
-							<button class="btn" on:click={createCatchRecords}>Create Pokédex data</button>
-						{/if}
-					{:else}
-						<div class="min-w-max mx-auto">
-							<h1>Loading Pokédex</h1>
-							<span class="loading loading-spinner loading-xl"></span>
-						</div>
-					{/if}
-				</div>
-			</main>
+			<PokedexViewList
+				bind:showOrigins
+				bind:showForms
+				bind:showShiny
+				bind:combinedData
+				bind:creatingRecords
+				bind:totalRecordsCreated
+				bind:failedToLoad
+				{updateACatch}
+				{createCatchRecords}
+			/>
 		</div>
 		<div class="drawer-side lg:relative">
 			<label for="my-drawer" class="drawer-overlay lg:hidden"></label>
-			<aside
-				class="menu bg-gray-800 text-white min-h-full w-64 p-4 lg:fixed xs:top-0 lg:left-0 h-full lg:h-5/6"
-			>
-				<h2 class="text-2xl font-semibold mb-4">Filters</h2>
-				<ul>
-					<li class="mb-2">
-						<button class="block p-2 hover:bg-gray-700 rounded" on:click={() => toggleForms()}>
-							Toggle Forms (Currently {showForms ? 'On' : 'Off'})
-						</button>
-					</li>
-					<li class="mb-2">
-						<button class="block p-2 hover:bg-gray-700 rounded" on:click={() => toggleOrigins()}>
-							Toggle Origins (Currently {showOrigins ? 'On' : 'Off'})
-						</button>
-					</li>
-				</ul>
-				<div class="mb-4">
-					<label for="catchRegionSelect">Region to catch in:</label>
-					<select
-						id="catchRegionSelect"
-						class="select select-bordered w-full max-w-xs text-black"
-						bind:value={catchRegion}
-						on:change={getData}
-					>
-						<option value="">All</option>
-						<option value="Kanto">Kanto (Red, Blue, Yellow, LG: Pikachu, LG: Eevee)</option>
-						<option value="Johto">Johto (Gold, Silver, Crystal, HG, SS)</option>
-						<option value="Hoenn">Hoenn (Ruby, Sapphire, Emerald, OR, AS)</option>
-						<option value="Sinnoh">Sinnoh (Diamond, Pearl, Platinum, BD, SP)</option>
-						<option value="Unova">Unova (Black, White, Black2, White2, Dream Radar)</option>
-						<option value="Kalos">Kalos (X, Y)</option>
-						<option value="Alola">Alola (Sun, Moon, Moon Demo, US, UM)</option>
-						<option value="Galar">Galar (Sword, Shield)</option>
-						<option value="Hisui">Hisui (PLA)</option>
-						<option value="Paldea">Paldea (Scarlet, Violet)</option>
-						<option value="Unknown">Unknown (Home, Go)</option>
-					</select>
-				</div>
-
-				<div class="mb-4">
-					<label for="catchGameSelect">Game to catch in: {catchGame}</label>
-					<select
-						id="catchGameSelect"
-						class="select select-bordered w-full max-w-xs text-black"
-						bind:value={catchGame}
-						on:change={getData}
-					>
-						<option value="">All</option>
-						<option value="Red">Red (Kanto)</option>
-						<option value="Blue">Blue (Kanto)</option>
-						<option value="Yellow">Yellow (Kanto)</option>
-						<option value="LG: Pikachu">LG: Pikachu (Kanto)</option>
-						<option value="LG: Eevee">LG: Eevee (Kanto)</option>
-						<option value="Gold">Gold (Johto)</option>
-						<option value="Silver">Silver (Johto)</option>
-						<option value="Crystal">Crystal (Johto)</option>
-						<option value="HG">HG (Johto)</option>
-						<option value="SS">SS (Johto)</option>
-						<option value="Ruby">Ruby (Hoenn)</option>
-						<option value="Sapphire">Sapphire (Hoenn)</option>
-						<option value="Emerald">Emerald (Hoenn)</option>
-						<option value="OR">OR (Hoenn)</option>
-						<option value="AS">AS (Hoenn)</option>
-						<option value="Diamond">Diamond (Sinnoh)</option>
-						<option value="Pearl">Pearl (Sinnoh)</option>
-						<option value="Platinum">Platinum (Sinnoh)</option>
-						<option value="BD">BD (Sinnoh)</option>
-						<option value="SP">SP (Sinnoh)</option>
-						<option value="Black">Black (Unova)</option>
-						<option value="White">White (Unova)</option>
-						<option value="Black2">Black2 (Unova)</option>
-						<option value="White2">White2 (Unova)</option>
-						<option value="Dream Radar">Dream Radar (Unova)</option>
-						<option value="X">X (Kalos)</option>
-						<option value="Y">Y (Kalos)</option>
-						<option value="Sun">Sun (Alola)</option>
-						<option value="Moon">Moon (Alola)</option>
-						<option value="Moon Demo">Moon Demo (Alola)</option>
-						<option value="US">US (Alola)</option>
-						<option value="UM">UM (Alola)</option>
-						<option value="Sword">Sword (Galar)</option>
-						<option value="Shield">Shield (Galar)</option>
-						<option value="PLA">PLA (Hisui)</option>
-						<option value="Scarlet">Scarlet (Paldea)</option>
-						<option value="Violet">Violet (Paldea)</option>
-						<option value="Home">Home (Unknown)</option>
-						<option value="Go">Go (Unknown)</option>
-					</select>
-				</div>
-
-				<h2 class="text-2xl font-semibold mb-4">Paging</h2>
-				<div>
-					<Pagination bind:currentPage bind:itemsPerPage bind:totalPages />
-				</div>
-			</aside>
+			<PokedexSidebar
+				bind:showForms
+				bind:showOrigins
+				bind:showShiny
+				bind:catchRegion
+				bind:catchGame
+				{getData}
+				{toggleForms}
+				{toggleOrigins}
+				{toggleShiny}
+			/>
 		</div>
 	</div>
 {/if}