diff --git a/.vscode/settings.json b/.vscode/settings.json
index 31acd7d..fa9f6ad 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -46,6 +46,7 @@
         "Roboto",
         "Salac",
         "SAPP",
+        "Shinies",
         "Silph",
         "𝗦𝗽",
         "𝗦𝗽𝗲𝗲𝗱",
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 85a03fb..269ac33 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -71,7 +71,7 @@ export default defineNuxtConfig({
 		"nuxt-viewport",
 	],
 	ui: {
-		icons: ["tabler", "material-symbols"],
+		icons: ["tabler", "material-symbols", "fluent"],
 	},
 	colorMode: {
 		classSuffix: "",
diff --git a/src/components/presets/badge/EncounterBadge.vue b/src/components/presets/badge/EncounterBadge.vue
new file mode 100644
index 0000000..70789a7
--- /dev/null
+++ b/src/components/presets/badge/EncounterBadge.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+// utility functions
+import { pkmnRef } from "~/utility";
+
+// get state
+import useStore from "~/stores";
+const store = useStore();
+
+const props = defineProps<{
+	data: IPokemon;
+}>();
+
+// get viewport
+const viewport = useViewport();
+
+// extra info toggled
+const showExtraInfo: Ref<boolean> = ref(false);
+defineExpose({
+	showExtraInfo,
+});
+
+// is sprite visible?
+const showSprite = computed(() => {
+	// always show if in mobile mode
+	if (viewport.isLessThan("full") || !showExtraInfo.value) return true;
+
+	return false;
+});
+
+
+// const showExtraInfo = true;
+
+// get pokemon sprite
+const spriteSrc = ref("");
+store
+	.getPokemonSprite(props.data.natID, props.data.shiny)
+	.then((result) => (spriteSrc.value = result));
+</script>
+
+<template>
+	<div
+		:class="[
+			'grid gap-1 w-full',
+			viewport.isLessThan('full') || showExtraInfo
+				? 'grid-cols-1'
+				: 'grid-cols-1',
+		]"
+	>
+
+
+
+		<!-- Pokemon Info -->
+		<div
+			class="bg-light-primary dark:bg-dark-primary rounded-lg full:flex full:flex-col hidden justify-start items-center py-1 px-1 w-full h-full"
+		>
+			<!-- Pokemon Sprite -->
+			<div
+				v-if="showSprite"
+				class="bg-light-primary dark:bg-dark-primary rounded-lg flex justify-center items-center w-full h-full"
+			>
+				<Spinner v-if="!spriteSrc" />
+				<img
+					v-else
+					class="rendering-pixelated"
+					:src="spriteSrc"
+					:title="data.name + (data.shiny ? ' (Shiny)' : '')"
+				/>
+				<!-- Name / Shiny -->
+				<div
+					class="text-base flex justify-center items-center text-s content-center"
+				>
+					<!-- Name -->
+					<span class="mr-1 ">{{ data.name }} </span>
+
+					<!-- Shiny -->
+					<div
+						class="bg-light-secondary dark:bg-dark-secondary rounded-md flex justify-center items-center p-1"
+						v-if="data.shiny"
+					>
+						<Icon
+							name="heroicons:sparkles-solid"
+							class="h-4 text-light-tertiary dark:text-dark-tertiary"
+						/>
+					</div>
+					<!-- Level -->
+					<div class="text-base flex justify-center items-center text-center w-full my-1">
+						<span class="text-xs"> - Lvl: {{ data.level }}</span>
+						<!-- Ability -->
+						<span class="text-base flex items-center mb-1">
+							<Icon
+								name="icon-park-solid:fire"
+								class="h-4 text-light-tertiary dark:text-dark-tertiary"
+							/>
+							<span class="text-xs ml-1">
+								 {{ data.ability }}  </span>
+						</span>
+						<!-- Held Item -->
+						<span
+							v-if="data.item.name != 'None'"
+							class="text-base flex items-center mb-1"
+						>
+							<Icon
+								name="mdi:sack"
+								class="h-4 text-light-tertiary dark:text-dark-tertiary"
+							/>
+							<span class="text-xs ml-1"> {{ data.item.name }}</span>
+						</span>
+					</div>
+				</div>
+			</div>
+			<!-- IV Sum -->
+			<div class="flex flex-col items-center justify-center text-center text-xs h-1 w-full my-1">
+			
+				<span class="mb-1">IV Sum: {{ data.IVSum }}</span>
+				<div class="bg-light-tertiary dark:bg-dark-tertiary rounded-full justify-center items-center w-[75%] h-1">
+					<div
+						class="bg-light-accent dark:bg-dark-accent rounded-full h-1"
+						:style="'width: '+ Math.ceil((data.IVSum/186)*100) + '%'"
+					></div>
+				</div>
+			</div>
+
+			<!-- Show More Button -->
+			<button
+				@click="showExtraInfo = !showExtraInfo"
+				class="cursor-pointer"
+			>
+				<Icon
+					v-if="showExtraInfo"
+					name="material-symbols:arrow-circle-up-outline"
+					class="h-6 text-light-tertiary dark:text-dark-tertiary hover:text-light-accent hover:dark:text-dark-accent"
+				/>
+				<Icon
+					v-else
+					name="material-symbols:arrow-circle-down"
+					class="h-6 text-light-tertiary dark:text-dark-tertiary hover:text-light-accent hover:dark:text-dark-accent"
+				/>
+			</button>
+
+			<!-- Show More Content -->
+			<div
+				v-if="showExtraInfo"
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md py-2 px-3 mb-2"
+			>
+
+
+				<!-- Moves List -->
+				<ul class="mb-1">
+					<li
+						v-for="move in data.moves"
+						:key="move.id"
+						class="flex flex-row items-center justify-between text-xs"
+					>
+						<span>
+							{{ move.name }}
+						</span>
+						<span class="mx-2"></span>
+						<span class="flex items-center">
+							<Icon
+								name="ph:hand-fist-fill"
+								class="h-3 text-light-tertiary dark:text-dark-tertiary"
+							/>
+							<span> {{ move.power }}</span>
+							<Icon
+								name="iconamoon:lightning-1-fill"
+								class="h-3 text-light-tertiary dark:text-dark-tertiary ml-1"
+							/>
+							<span>
+								{{ move.remaining_pp }}/{{ move.pp }}</span
+							></span
+						>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/src/components/presets/buttons/AddInstanceButton.vue b/src/components/presets/buttons/AddInstanceButton.vue
deleted file mode 100644
index d42a9f5..0000000
--- a/src/components/presets/buttons/AddInstanceButton.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-	<IconButton @clickEvent="" icon="i-material-symbols-add-box-rounded" />
-</template>
diff --git a/src/components/presets/card/EncountersCard.vue b/src/components/presets/card/EncountersCard.vue
index 223f961..bfa2b1a 100644
--- a/src/components/presets/card/EncountersCard.vue
+++ b/src/components/presets/card/EncountersCard.vue
@@ -170,48 +170,63 @@ watch(pokemonSelected, () => {
 					>
 						<div class="grid grid-flow-row text-xs gap-1">
 							<!-- Total Encounters -->
-							<div class="grid grid-flow-row text-left">
-								<span>Total Encounters</span>
+							<div class="grid grid-flow-row text-left text-s font-bold">
+								<span>Phase / Total Encounters</span>
 								<span
-									class="font-bold text-sm text-light-text-placeholder dark:text-dark-text-placeholder"
+									class=" text-xs self-end text-light-text-placeholder dark:text-dark-text-placeholder"
 									>{{
+																				
+										pokemonSelectedData &&
+										pokemonSelectedData.phase_encounters
+											? pokemonSelectedData.phase_encounters
+											: "0" 
+									}} / {{
 										pokemonSelectedData &&
 										pokemonSelectedData.encounters
 											? pokemonSelectedData.encounters
 											: "None"
-									}}</span
+									}}
+									</span
 								>
 							</div>
 
 							<!-- Last Encounter Time -->
 							<div
-								class="grid grid-flow-row text-left"
+								class="grid grid-flow-row text-left text-s font-bold"
 								v-if="
 									pokemonSelectedData &&
 									pokemonSelectedData.encounters
 								"
 							>
-								<span>Last Encounter</span>
+								<span>Phase/Total Highest IVSums</span>
 								<span
-									class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+									class="text-xs self-end text-light-text-placeholder dark:text-dark-text-placeholder"
 									>{{
-										new Date(
-											pokemonSelectedData.last_encounter_time_unix
-										).toLocaleTimeString("en-US")
-									}}</span
+																				
+										pokemonSelectedData &&
+										pokemonSelectedData.total_lowest_iv_sum
+											? pokemonSelectedData.phase_highest_iv_sum
+											: "0" 
+									}} / {{
+										pokemonSelectedData &&
+										pokemonSelectedData.total_highest_iv_sum
+											? pokemonSelectedData.total_highest_iv_sum
+											: "None"
+									}}
+									</span
 								>
 							</div>
 
 							<!-- Shiny Encounters -->
-							<div class="grid grid-flow-row text-left">
-								<span>Shiny Encounters</span>
+							<div class="grid grid-flow-row text-left text-s font-bold">
+								<span>Shiny Average</span>
 								<span
-									class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+									class="text-xs self-end text-light-text-placeholder dark:text-dark-text-placeholder"
 									>{{
 										pokemonSelectedData &&
-										pokemonSelectedData.shiny_encounters
-											? pokemonSelectedData.shiny_encounters
-											: "None"
+										pokemonSelectedData.shiny_average
+											? pokemonSelectedData.shiny_average
+											: "0 / " + pokemonSelectedData.encounters
 									}}</span
 								>
 							</div>
@@ -277,4 +292,4 @@ watch(pokemonSelected, () => {
 			</div>
 		</div>
 	</div>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/components/presets/card/Sidebar.vue b/src/components/presets/card/Sidebar.vue
index 6ceb505..37da0fc 100644
--- a/src/components/presets/card/Sidebar.vue
+++ b/src/components/presets/card/Sidebar.vue
@@ -1,9 +1,69 @@
 <script setup lang="ts">
+// props
 const props = defineProps<{
 	panelStyle: string;
+	statsData: IStats | undefined;
+	emulatorData: IEmulator | undefined;
+	shinyData: TShinyLog | undefined;
+	encounterLogData: TEncounterLog | undefined;
 }>();
+
+// modal visibility
+const modalDetailedStatsOpen = ref(false);
+const modalShinyDexOpen = ref(false);
 </script>
 
 <template>
-	<div :class="panelStyle"></div>
+	<div :class="panelStyle">
+		<div
+			class="flex flex-col justify-center items-center w-full h-full py-2"
+		>
+			<!-- Top Buttons -->
+			<div
+				class="flex flex-col flex-1 justify-start items-center gap-2 w-full"
+			>
+				<!-- detailed stats modal button  -->
+				<IconButton
+					v-if="statsData"
+					@clickEvent="() => (modalDetailedStatsOpen = true)"
+					icon="i-material-symbols-query-stats-rounded"
+				/>
+
+				<!-- shiny dex modal button  -->
+				<IconButton
+					v-if="shinyData"
+					@clickEvent="() => (modalShinyDexOpen = true)"
+					icon="i-fluent-arrow-trending-sparkle-24-filled"
+				/>
+			</div>
+
+			<!-- Middle Buttons -->
+			<div
+				class="flex flex-col flex-1 justify-center items-center gap-2 w-full"
+			></div>
+
+			<!-- Bottom Buttons -->
+			<div
+				class="flex flex-col flex-1 justify-end items-center gap-2 w-full"
+			></div>
+		</div>
+	</div>
+
+	<!-- Detailed Stats Modal -->
+	<DetailedStatsModal
+		v-if="statsData && emulatorData"
+		:open="modalDetailedStatsOpen"
+		@closeModal="modalDetailedStatsOpen = false"
+		:stats-data="statsData"
+		:emulator-data="emulatorData"
+	/>
+
+	<!-- Shiny Dex Modal -->
+	<ShinyDexModal
+		v-if="shinyData && encounterLogData"
+		:open="modalShinyDexOpen"
+		@closeModal="modalShinyDexOpen = false"
+		:shiny-data="shinyData"
+		:encounter-log-data="encounterLogData"
+	/>
 </template>
diff --git a/src/components/presets/card/StatsCard.vue b/src/components/presets/card/StatsCard.vue
index 8c4a51a..2e9fa4d 100644
--- a/src/components/presets/card/StatsCard.vue
+++ b/src/components/presets/card/StatsCard.vue
@@ -1,9 +1,32 @@
 <script setup lang="ts">
+//import { onMounted, ref } from 'vue';
+
+
 // props
 const props = defineProps<{
 	panelStyle: string;
 	data: IStats;
+	//emulatorData: IEmulator;
 }>();
+
+// Reactive variable to store the calculated percentage
+//const fpsPercentage = ref<string>("");
+
+//onMounted(() => {
+    // Calculate and update the percentage after the component is mounted
+//    calculatePercentage();
+//});
+
+//function calculatePercentage() {
+    // Assuming emulatorData.current_fps contains the current FPS value
+//    const currentFps = props.emulatorData.current_fps;
+    
+    // Calculate the percentage based on the formula (current_fps / 59.7) * 100
+//    const percentage = (currentFps / 59.7) * 100;
+    
+    // Update the reactive variable
+//    fpsPercentage.value = percentage.toFixed(2) + "%";
+//}
 </script>
 
 <template>
@@ -26,39 +49,61 @@ const props = defineProps<{
 					}}</span>
 				</div>
 			</div>
+			
+			<!-- Shortest Phases Streak -->
+			<div
+				class="bg-light-primary dark:bg-dark-primary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Phase Streak Record</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{
+							data.totals.phase_streak
+						}}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Phase Streak Record Mon</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ data.totals.phase_streak_pokemon }}</span
+					>
+				</div>
+			</div>
 
-			<!-- Total Highest IVSum -->
+			<!-- Phase Highest IVSum -->
 			<div
 				class="bg-light-primary dark:bg-dark-primary rounded-md grid grid-flow-col p-2 gap-2"
 			>
 				<div class="grid grid-flow-row text-left">
-					<span>Total Highest IV Pokemon</span>
+					<span>Phase Lowest SV</span>
 					<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">{{
-						data.totals.highest_iv_sum_pokemon
+						data.totals.phase_lowest_sv
 					}}</span>
 				</div>
 				<div class="grid grid-flow-row text-right">
-					<span>Total Highest IVSum</span>
+					<span>Phase Lowest SV Pokemon</span>
 					<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">{{
-						data.totals.highest_iv_sum
+						data.totals.phase_lowest_sv_pokemon
 					}}</span>
 				</div>
 			</div>
 
-			<!-- Total Lowest IVSum -->
+			<!-- Phase Highest IVSum -->
 			<div
 				class="bg-light-primary dark:bg-dark-primary rounded-md grid grid-flow-col p-2 gap-2"
 			>
 				<div class="grid grid-flow-row text-left">
-					<span>Total Lowest IV Pokemon</span>
+					<span>Phase Highest IVSum</span>
 					<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">{{
-						data.totals.lowest_iv_sum_pokemon
+						data.totals.phase_highest_iv_sum
 					}}</span>
 				</div>
 				<div class="grid grid-flow-row text-right">
-					<span>Total Lowest IVSums</span>
+					<span>Phase Highest IVSum Pokemon</span>
 					<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">{{
-						data.totals.lowest_iv_sum
+						data.totals.phase_highest_iv_sum_pokemon
 					}}</span>
 				</div>
 			</div>
@@ -68,52 +113,101 @@ const props = defineProps<{
 				class="bg-light-primary dark:bg-dark-primary rounded-md grid grid-flow-col p-2 gap-2"
 			>
 				<div class="grid grid-flow-row text-left">
-					<span>Phase Lowest IV Pokemon</span>
+					<span>Phase Lowest IVSum</span>
 					<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">{{
-						data.totals.phase_lowest_iv_sum_pokemon
+						data.totals.phase_lowest_iv_sum
 					}}</span>
 				</div>
 				<div class="grid grid-flow-row text-right">
-					<span>Phase Lowest IVSum</span>
+					<span>Phase Lowest IVSum Pokemon</span>
 					<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">{{
-						data.totals.phase_lowest_iv_sum
+						data.totals.phase_lowest_iv_sum_pokemon
 					}}</span>
 				</div>
 			</div>
 
-			<!-- Shiny averages -->
+			<!-- Shiny Averages -->
 			<div
 				class="bg-light-primary dark:bg-dark-primary rounded-md grid grid-flow-col p-2 gap-2"
 			>
-				<div class="grid grid-flow-row gap-2">
-					<div class="grid grid-flow-row text-left">
-						<span>Shiny Average</span>
-						<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">{{
+				<div class="grid grid-flow-row text-left">
+					<span>Shiny Average</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{
 							data.totals.shiny_average
-						}}</span>
-					</div>
-					<div class="grid grid-flow-row text-left">
-						<span>Shortest Phase Pokemon</span>
-						<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">{{
-							data.totals.shortest_phase_pokemon
-						}}</span>
-					</div>
-				</div>
-				<div class="grid grid-flow-row gap-2">
-					<div class="grid grid-flow-row text-right">
-						<span>Shiny Encounters</span>
-						<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">{{
-							data.totals.shiny_encounters
-						}}</span>
-					</div>
-					<div class="grid grid-flow-row text-right">
-						<span>Shortest Phase Encounters</span>
-						<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">{{
-							data.totals.shortest_phase_encounters
-						}}</span>
-					</div>
+						}}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Total Encountered Shinies</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ data.totals.shiny_encounters }}</span
+					>
+				</div>
+			</div>
+			
+			<!-- TODO: Dan pls fix it goes invisible again Madge -->
+			<!-- Emu Data -->
+			<!--
+			<div
+				class="bg-light-primary dark:bg-dark-primary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Game Data</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>Game: {{ emulatorData.game.name }}</span
+					>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>Rev: {{ emulatorData.game.revision }}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Profile Name</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ emulatorData.profile.name }}</span
+					>
+				</div>
+			</div>
+			Current Emulation Speed -- Comment
+			
+			<div class="bg-light-primary dark:bg-dark-primary rounded-md grid grid-flow-col p-2 gap-2">
+				<div class="grid grid-flow-row text-left">
+					<span>Current Emulation Speed</span>
+					<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">
+						{{ emulatorData.emulation_speed }} - Running at <span>{{ fpsPercentage }}</span>
+					</span>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Current FPS</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ emulatorData.current_fps }}</span
+					>
+				</div>
+			</div>
+			<div
+				class="bg-light-primary dark:bg-dark-primary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Current Mode</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ emulatorData.bot_mode }}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Current Message</span>
+					<span class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder">
+						{{ emulatorData.current_message }}
+					</span>
 				</div>
 			</div>
+		-->			
 		</div>
 	</div>
 </template>
diff --git a/src/components/presets/card/TrainerCard.vue b/src/components/presets/card/TrainerCard.vue
index ac7e5b6..ba1a018 100644
--- a/src/components/presets/card/TrainerCard.vue
+++ b/src/components/presets/card/TrainerCard.vue
@@ -105,6 +105,8 @@ const game: "frlg" | "rse" = ["FIRE", "LEAF"].includes(
 					{{ trainerData.coords[1] }})
 				</span>
 			</div>
+			
+			<!-- TODO: Map info from here: https://github.com/SimplyBLGDev/simplyblgdev.github.io/tree/master -->
 			<!-- TODO: Target Mon?-->
 		</div>
 	</div>
diff --git a/src/components/presets/modals/DetailedStatsModal.vue b/src/components/presets/modals/DetailedStatsModal.vue
new file mode 100644
index 0000000..6929ab7
--- /dev/null
+++ b/src/components/presets/modals/DetailedStatsModal.vue
@@ -0,0 +1,310 @@
+<script setup lang="ts">
+// props
+import { ref, defineProps, computed, watchEffect } from 'vue';
+import Chart from 'chart.js/auto';
+
+const props = defineProps<{
+  open: boolean;
+  statsData: IStats;
+  emulatorData: IEmulator;
+}>();
+
+// Create a ref for the canvas
+const chartCanvas = ref<HTMLCanvasElement | null>(null);
+
+// format emulator fps data automatically
+const fpsPercentage: ComputedRef<string> = computed(() => {
+  return ((props.emulatorData.current_fps / 59.7) * 100).toFixed(2) + "%";
+});
+
+const shinyAverage: ComputedRef<number> = computed(() => {
+  const parts = props.statsData.totals.shiny_average.split('/');
+  console.log('Parts:', parts); // Log the parts array
+  if (parts.length === 2) {
+    return parseInt(parts[1].replace(/,/g, ''), 10);
+  }
+  return 0; // Default value or handle the case where the format is unexpected
+});
+
+
+
+// Function to update the ChartJS chart
+function updateChart() {
+  // Access the canvas element
+  const canvas = chartCanvas.value;
+  
+  console.log('Phase Encounters:', props.statsData.totals.phase_encounters);
+  console.log('Shiny Average:', shinyAverage.value);
+  // Check if the canvas exists and statsData has the required data for the chart
+  if (canvas && props.statsData) {
+    // Get the context of the canvas
+    const ctx = canvas.getContext('2d');
+
+    // Example: Create a bar chart comparing phase_encounters and shiny_average
+    new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: ['Phase Encounters', 'Shiny Average'],
+        datasets: [
+          {
+            label: 'Comparisson',
+            data: [
+              props.statsData.totals.phase_encounters,
+              shinyAverage.value,
+            ],
+            backgroundColor: ['rgba(75, 192, 192, 0.2)', 'rgba(255, 99, 132, 0.2)'],
+            borderColor: ['rgba(75, 192, 192, 1)', 'rgba(255, 99, 132, 1)'],
+            borderWidth: 1,
+          },
+        ],
+      },
+    });
+  }
+}
+
+// Create a watcher to update the chart when statsData changes
+watchEffect(() => {
+  // Access statsData and update the chart accordingly
+  updateChart();
+});
+</script>
+
+
+
+<template>
+  <Modal :open="open" @closeModal="$emit('closeModal')">
+    <!-- Header -->
+    <template #header>
+      <h3 class="text-base font-semibold">
+        Detailed Instance Statistics
+      </h3>
+    </template>
+
+    <!-- Body -->
+    <template #default>
+      <div class="grid grid-cols-flow gap-4 h-full p-2 text-xs">
+        <!-- First Column -->
+        <div>
+			<!-- Encounter Infos -->
+			<div
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Total Encounters</span
+					><span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.encounters }}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Phase Encounters</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.phase_encounters }}</span
+					>
+				</div>
+			</div>
+
+			<!-- Total Highest IVSum -->
+			<div
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Total Highest IV Pokemon</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.highest_iv_sum_pokemon }}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Total Highest IVSum</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.highest_iv_sum }}</span
+					>
+				</div>
+			</div>
+
+			<!-- Total Lowest IVSum -->
+			<div
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Total Lowest IV Pokemon</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.lowest_iv_sum_pokemon }}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Total Lowest IVSums</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.lowest_iv_sum }}</span
+					>
+				</div>
+			</div>
+
+			<!-- Phase Lowest IVSum -->
+			<div
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Phase Lowest IV Pokemon</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{
+							statsData.totals.phase_lowest_iv_sum_pokemon
+						}}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Phase Lowest IVSum</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.phase_lowest_iv_sum }}</span
+					>
+				</div>
+			</div>
+			<!-- Phase Phase Streak -->
+			<div
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Phase Current Streak Pokemon</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.phase_streak_pokemon }}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Phase Current Streak</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.phase_streak }}</span
+					>
+				</div>
+			</div>
+			<!-- Shortest Phases Streak -->
+			<div
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Shortest Streak Pokemon</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.shortest_phase_pokemon }}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>PhShortest Streak</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{
+							statsData.totals.shortest_phase_encounters
+						}}</span
+					>
+				</div>
+			</div>
+			<!-- Shiny Averages -->
+			<div
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Shiny Average</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.shiny_average }}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Total Encountered Shinies</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ statsData.totals.shiny_encounters }}</span
+					>
+				</div>
+			</div>
+
+			<!-- TODO: Make this retarded modal let me add more data without disappearing -->
+			<!-- Example -->
+        </div>
+
+        <!-- Second Column -->
+        <div>
+			<div
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Game Data</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>Game: {{ emulatorData.game.name }}</span
+					>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>Rev: {{ emulatorData.game.revision }}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Profile Name</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ emulatorData.profile.name }}</span
+					>
+				</div>
+			</div>
+			<!-- Current Emulation Speed -->
+			<div
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Current Emulation Speed</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+					>
+						{{ emulatorData.emulation_speed }} - Running at
+						<span>{{ fpsPercentage }}</span>
+					</span>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Current FPS</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ emulatorData.current_fps }}</span
+					>
+				</div>
+			</div>
+			<div
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md grid grid-flow-col p-2 gap-2"
+			>
+				<div class="grid grid-flow-row text-left">
+					<span>Current Mode</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+						>{{ emulatorData.bot_mode }}</span
+					>
+				</div>
+				<div class="grid grid-flow-row text-right">
+					<span>Current Message</span>
+					<span
+						class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+					>
+						{{ emulatorData.current_message }}
+					</span>
+				</div>
+			</div>
+        </div>
+
+        <!-- Third Column with ChartJS -->
+        <div>
+          <!-- ChartJS Canvas -->
+          <canvas ref="chartCanvas" width="300" height="200"></canvas>
+        </div>
+      </div>
+    </template>
+
+    <!-- Footer -->
+    <!-- <template #footer> </template> -->
+  </Modal>
+</template>
diff --git a/src/components/presets/modals/ShinyDexModal.vue b/src/components/presets/modals/ShinyDexModal.vue
new file mode 100644
index 0000000..40ee0d3
--- /dev/null
+++ b/src/components/presets/modals/ShinyDexModal.vue
@@ -0,0 +1,151 @@
+div
+<script setup lang="ts">
+// props
+const props = defineProps<{
+	open: boolean;
+	shinyData: TShinyLog;
+	encounterLogData: TEncounterLog;
+}>();
+
+// handle infinite scrolling of wild pokemon encounters
+const encounteredWildPokemonList = ref<HTMLElement>();
+const encounteredWildPokemonData = ref(
+	props.encounterLogData.toReversed().slice(0, 2)
+);
+useInfiniteScroll(
+	encounteredWildPokemonList,
+	() => {
+		// already loaded all
+		if (
+			encounteredWildPokemonData.value.length >=
+			props.encounterLogData.length
+		)
+			return;
+
+		// load more
+		encounteredWildPokemonData.value =
+			encounteredWildPokemonData.value.concat(
+				props.encounterLogData
+					.toReversed()
+					.slice(
+						encounteredWildPokemonData.value.length,
+						encounteredWildPokemonData.value.length + 3
+					)
+			);
+	},
+	{ distance: 10 }
+);
+
+// handle infinite scrolling of shiny wild pokemon encounters
+const encounteredShinyWildPokemonList = ref<HTMLElement>();
+const encounteredShinyWildPokemonData = ref(
+	props.shinyData.toReversed().slice(0, 2)
+);
+useInfiniteScroll(
+	encounteredShinyWildPokemonList,
+	() => {
+		// already loaded all
+		if (
+			encounteredShinyWildPokemonData.value.length >=
+			props.shinyData.length
+		)
+			return;
+
+		// load more
+		encounteredShinyWildPokemonData.value =
+			encounteredShinyWildPokemonData.value.concat(
+				props.shinyData
+					.toReversed()
+					.slice(
+						encounteredShinyWildPokemonData.value.length,
+						encounteredShinyWildPokemonData.value.length + 3
+					)
+			);
+	},
+	{ distance: 10 }
+);
+
+// encounter type
+const encounterType = ref(0);
+</script>
+
+<template>
+	<Modal :open="open" @closeModal="$emit('closeModal')">
+		<!-- Header -->
+		<template #header>
+			<h3 class="text-base font-semibold">Shiny Dex</h3>
+		</template>
+
+		<!-- Body -->
+		<template #default>
+			<div class="flex flex-col h-[44vh] self-start">
+				<!-- Encounter Stats -->
+				<div class="flex flex-1 flex-grow w-full"></div>
+
+				<!-- Encountered Pokemon Title/Options -->
+				<div
+					class="bg-light-secondary dark:bg-dark-secondary rounded-md flex flex-col flex-[0.4] justify-center items-center px-2 pt-3 gap-y-1"
+				>
+					<span class="text-sm text-center">Latest Encounters</span>
+					<UTabs
+						class="justify-end"
+						@change="(index: number) => encounterType = index"
+						:items="[{ label: 'Wild' }, { label: 'Shiny' }]"
+						:default-index="encounterType"
+						:ui="{
+							list: {
+								background:
+									'bg-light-secondary dark:bg-dark-secondary',
+								marker: {
+									background:
+										'bg-light-primary dark:bg-dark-primary',
+								},
+								tab: {
+									active: 'text-light-text dark:text-dark-text',
+									inactive:
+										'text-light-text-placeholder dark:text-dark-text-placeholder',
+									padding: 'px-2',
+								},
+							},
+						}"
+					/>
+				</div>
+
+				<!-- Encountered Wild Pokemon List -->
+				<div class="flex flex-grow min-h-0 w-full justify-center">
+					<!-- TODO: Switch encounter log with Pokemon Totals -->
+					<!-- TODO: Get it to load in 6x6 table or whatever looks good -->
+					<ul
+						v-if="encounterType === 0"
+						ref="encounteredWildPokemonList"
+						class="w-full overflow-auto scrollbar-hidden"
+					>
+						<li
+							v-for="encounteredPokemon in encounteredWildPokemonData"
+							class="gap-1 my-1"
+						>
+							<PokemonBadge :data="encounteredPokemon.pokemon" />
+						</li>
+					</ul>
+
+					<!-- TODO: Make it load all of shiny_log. -->
+					<ul
+						v-else
+						ref="encounteredShinyWildPokemonList"
+						class="w-full overflow-auto scrollbar-hidden"
+					>
+						<li
+							v-for="encounteredPokemon in encounteredShinyWildPokemonData"
+							class="gap-1 my-1"
+						>
+							<PokemonBadge :data="encounteredPokemon.pokemon" />
+						</li>
+					</ul>
+				</div>
+			</div>
+		</template>
+
+		<!-- Footer -->
+		<!-- <template #footer></template> -->
+	</Modal>
+</template>
\ No newline at end of file
diff --git a/src/components/presets/panel/InstancePanel.vue b/src/components/presets/panel/InstancePanel.vue
index 4c4215e..637d4d5 100644
--- a/src/components/presets/panel/InstancePanel.vue
+++ b/src/components/presets/panel/InstancePanel.vue
@@ -11,12 +11,46 @@ const props = defineProps<{
 
 <template>
 	<!-- Sidebar -->
-	<Sidebar :panel-style="props.panelStyle[0]" />
+	<Sidebar
+		:panel-style="props.panelStyle[0]"
+		:stats-data="
+			props.instanceData
+				? props.instanceData.stats
+					? props.instanceData.stats
+					: undefined
+				: undefined
+		"
+		:emulator-data="
+			props.instanceData
+				? props.instanceData.emulator
+					? props.instanceData.emulator
+					: undefined
+				: undefined
+		"
+		:encounter-log-data="
+			props.instanceData
+				? props.instanceData.encounter_log
+					? props.instanceData.encounter_log
+					: undefined
+				: undefined
+		"
+		:shiny-data="
+			props.instanceData
+				? props.instanceData.shiny_log
+					? props.instanceData.shiny_log
+					: undefined
+				: undefined
+		"
+	/>
 
 	<!-- Trainer Info -->
 	<LoadingCard
 		:panel-style="props.panelStyle[1]"
-		v-if="!props.instanceData || !dataExists(props.instanceData.trainer)"
+		v-if="
+			!props.instanceData ||
+			!dataExists(props.instanceData.trainer) ||
+			!dataExists(props.instanceData.emulator)
+		"
 	/>
 	<TrainerCard
 		v-else
diff --git a/src/pages/index.vue b/src/pages/index.vue
index b6843fa..13deee0 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -13,58 +13,110 @@ const store = useStore();
 // initial active view
 const activeView: ShallowRef<Component> = shallowRef(Loading);
 
+// Function to fetch encounter data
+const fetchEncounterData = async (apiURL: string, dataIndex: number) => {
+  try {
+    const response: IInstanceData = await store.fetchAllInstanceEndpointData(apiURL);
+
+    // save response for this endpoint on this instance
+    store.instanceData[dataIndex] = response;
+
+    // update lastFetched value
+    store.instances[dataIndex].lastFetched = Date.now();
+
+    // update lastFetchedEndpoint value
+    store.instances[dataIndex].lastFetchedEndpoint = {
+      encounter_log: undefined,
+      shiny_log: undefined,
+    };
+
+    for (const endpoint in response) {
+      (store.instances[dataIndex].lastFetchedEndpoint as CreateMutable<TInstanceEndpointLastFetched>)[endpoint as TInstanceEndpoint] = Date.now();
+    }
+  } catch (error) {
+    console.error(`Error fetching data for ${apiURL}`, error);
+  }
+};
+
+// Function to fetch slow data that doesnt change much
+const fetchSlowData = async (apiURL: string, dataIndex: number) => {
+  try {
+    const response: IInstanceData = await store.fetchAllInstanceEndpointData(apiURL);
+
+    // save response for this endpoint on this instance
+    store.instanceData[dataIndex] = response;
+
+    // update lastFetched value
+    store.instances[dataIndex].lastFetched = Date.now();
+
+    // update lastFetchedEndpoint value
+    store.instances[dataIndex].lastFetchedEndpoint = {
+      trainer: undefined,
+	  items: undefined,
+      party: undefined,
+    };
+
+    for (const endpoint in response) {
+      (store.instances[dataIndex].lastFetchedEndpoint as CreateMutable<TInstanceEndpointLastFetched>)[endpoint as TInstanceEndpoint] = Date.now();
+    }
+  } catch (error) {
+    console.error(`Error fetching data for ${apiURL}`, error);
+  }
+};
+
+// Function to fetch Fast updating data
+const fetchFastData = async (apiURL: string, dataIndex: number) => {
+  try {
+    const response: IInstanceData = await store.fetchAllInstanceEndpointData(apiURL);
+
+    // save response for this endpoint on this instance
+    store.instanceData[dataIndex] = response;
+
+    // update lastFetched value
+    store.instances[dataIndex].lastFetched = Date.now();
+
+    // update lastFetchedEndpoint value
+    store.instances[dataIndex].lastFetchedEndpoint = {
+      encounter_rate: undefined,
+      stats: undefined,
+      emulator: undefined,
+    };
+
+    for (const endpoint in response) {
+      (store.instances[dataIndex].lastFetchedEndpoint as CreateMutable<TInstanceEndpointLastFetched>)[endpoint as TInstanceEndpoint] = Date.now();
+    }
+  } catch (error) {
+    console.error(`Error fetching data for ${apiURL}`, error);
+  }
+};
+
 onMounted(async () => {
-	// no longer loading
-	activeView.value = InstancePanels;
-});
+  // no longer loading
+  activeView.value = InstancePanels;
 
-// update instance data for all stored instances
-store.instances.forEach(async (_data, index) => {
-	// fetch all endpoints from each instance's api
-	await store
-		.fetchAllInstanceEndpointData(store.instances[index].apiURL)
-		.then((response: IInstanceData) => {
-			// save response for this endpoint on this instance
-			store.instanceData[store.instances[index].dataIndex] = response;
-
-			// update lastFetched value
-			store.instances[index].lastFetched = Date.now();
-
-			// update lastFetchedEndpoint value
-			store.instances[index].lastFetchedEndpoint = {
-				trainer: undefined,
-				items: undefined,
-				party: undefined,
-				encounter_log: undefined,
-				shiny_log: undefined,
-				encounter_rate: undefined,
-				stats: undefined,
-				emulator: undefined,
-			};
-			for (const endpoint in store.instanceData[
-				store.instances[index].dataIndex
-			] as IInstanceData)
-				(
-					store.instances[index]
-						.lastFetchedEndpoint as CreateMutable<TInstanceEndpointLastFetched>
-				)[endpoint as TInstanceEndpoint] = Date.now();
-		});
+  // Set up periodic data fetching for each instance
+  store.instances.forEach((_data, index) => {
+    const { apiURL, dataIndex } = store.instances[index];
+    setInterval(() => fetchEncounterData(apiURL, dataIndex), 28000); // Fetch data every 20 seconds
+	setInterval(() => fetchFastData(apiURL, dataIndex), 13000); // Fetch data every 10 second
+	setInterval(() => fetchSlowData(apiURL, dataIndex), 60000); // Fetch data every 30 seconds
+  });
 });
 
 // determine props needed for active view
 const activeProps = computed(() => {
-	if (activeView.value == InstancePanels) {
-		return {
-			instances: store.instances,
-			instanceData: store.instanceData,
-		};
-	}
+  if (activeView.value == InstancePanels) {
+    return {
+      instances: store.instances,
+      instanceData: store.instanceData,
+    };
+  }
 });
 </script>
 
 <template>
-	<div class="h-screen overflow-hidden flex justify-center">
-		<!-- View -->
-		<component :is="activeView" v-bind="activeProps" />
-	</div>
+  <div class="h-screen overflow-hidden flex justify-center">
+    <!-- View -->
+    <component :is="activeView" v-bind="activeProps" />
+  </div>
 </template>