diff --git a/src/lib/components/atoms/LogoOption.svelte b/src/lib/components/atoms/LogoOption.svelte
index f86b111..c17083e 100644
--- a/src/lib/components/atoms/LogoOption.svelte
+++ b/src/lib/components/atoms/LogoOption.svelte
@@ -1,14 +1,19 @@
 <script lang="ts">
+  import Modal from './Dialogue.svelte';
+  import Variants from './Variants.svelte';
 	export let name: string;
-	export let logo: string;
-	export let filename: string;
-	export let id: string;
 	export let selected: Array<string>;
+  export let variants;
 	export let clicked = false;
 
-	const handleClick = () => {
-		clicked = !clicked;
+  let has_variants = variants.length > 1;
+  let modalOpen = false;
 
+  // TODO: cycle between them.
+  let current = variants[0];
+
+  function select_logo(id) {
+		// clicked = !clicked;
 		if (selected.includes(id)) {
 			selected = selected.filter((e) => e !== id);
 		} else {
@@ -17,16 +22,36 @@
 			selected = selected;
 		}
 		console.log(selected);
+  }
+
+	const handleClick = () => {
+    if (!has_variants) {
+      select_logo(current.id);
+    } else {
+      modalOpen = !modalOpen;
+    }
 	};
 </script>
 
+
+<Modal bind:modalOpen>
+	<svelte:fragment slot="title">{name}</svelte:fragment>
+	<svelte:fragment slot="description">
+    guhhhhhhhhhhhhhhhhhhhhh
+	</svelte:fragment>
+  <Variants />
+</Modal>
+
 <!-- SHUT UP -->
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div class="option" on:click={handleClick} on:keypress={handleClick} tabindex="0" class:clicked>
-	<img src={logo} alt={filename} />
+	<img src={current.gdrive_direct_url} alt={current.filename} />
 	<div class="text">
 		<h2>{name}</h2>
-		<h6>{filename}</h6>
+		<h6>{current.filename}</h6>
+    {#if has_variants}
+      <h4>This logo has variants</h4>
+    {/if}
 	</div>
 </div>
 
@@ -53,6 +78,10 @@
 		text-overflow: ellipsis;
 	}
 
+  h4 {
+    font-weight: 800;
+  }
+
 	h6 {
 		font-size: 0.9rem;
 		overflow: hidden;
diff --git a/src/lib/components/atoms/Variants.svelte b/src/lib/components/atoms/Variants.svelte
new file mode 100644
index 0000000..967ae64
--- /dev/null
+++ b/src/lib/components/atoms/Variants.svelte
@@ -0,0 +1 @@
+  <img src="https://cdn.discordapp.com/emojis/1063976228660457552.gif?size=48&quality=lossless" style="width: 20rem;" alt="h">
diff --git a/src/routes/polling/+page.svelte b/src/routes/polling/+page.svelte
index b83421c..366815c 100644
--- a/src/routes/polling/+page.svelte
+++ b/src/routes/polling/+page.svelte
@@ -8,8 +8,26 @@
 	import Button from '$lib/components/atoms/Button.svelte';
 
 	let modalOpen = false;
-	let selected: Array<string> = [];
-	let logos: Array<any> = [];
+	let selected = {};
+function calc_ui_selected_count(v) {
+  let n = 0;
+  for (const item of Object.values(v)) {
+    if (item.length != 0) {
+      console.log(item);
+      n += 1;
+    }
+  }
+  return n;
+}
+function calc_selected_logo_ids(v) {
+  return [...Object.values(v)].map(data => data.variants).flat();
+}
+
+  // afn please don't do this lol this is shitty code
+  $: ui_selected_count = calc_ui_selected_count(selected);
+  $: selected_logo_ids = calc_selected_logo_ids(selected);
+	let logos = [];
+  let logo_ids = [];
 	let transitionDirection = 5;
 	let logoAmount = 4;
 	let currentPage = 0;
@@ -48,10 +66,16 @@
 		const response = await fetch('https://poll.revanced.app/logos');
 		const json = await response.json();
 
-		// make better json
-		for (const name of Object.keys(json)) {
-			logos.push({ name, ...json[name] });
-		}
+    for (const name of Object.keys(json)) {
+      // lol the performance
+      selected[name] = [];
+
+      logos.push({ name, variants: json[name].logos });
+      logo_ids = [...logo_ids, ...json[name].logos.map(v => v.id)];
+    }
+    console.log(logos);
+    console.log(logo_ids);
+    console.log(selected_logo_ids);
 
 		// randomize the order of the logos to minimize bias
 		for (let i = logos.length - 1; i > 0; i--) {
@@ -109,6 +133,7 @@
 
 	async function submitBallot() {
 		// console.log(token);
+    throw Error("This shit needs to be redone now hhhhhhh");
 		const data = {
 			votes: logos.map((logo) => ({ cid: logo.id, vote: selected.includes(logo.id) }))
 		};
@@ -145,7 +170,7 @@
 			<h3>ReVanced</h3>
 			<h1>{finalPage ? 'Review selected logos' : 'Select logos'}</h1>
 			<h2>
-				{selected.length}/{logos.length} selected · Page {Number(currentPage) + 1}/{logoPages + 1}
+				{ui_selected_count}/{logos.length} selected · Page {Number(currentPage) + 1}/{logoPages + 1}
 			</h2>
 			<div class="top-custom-button-container">
 				<button on:click={() => (modalOpen = !modalOpen)}>How does this work?</button>
@@ -154,33 +179,29 @@
 		</div>
 
 		<div class="options-grid">
-			{#each logos.slice(min, max) as { id, gdrive_direct_url, name, filename }}
+			{#each logos.slice(min, max) as { variants, name }}
 				{#key currentPage}
 					<span in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
 						<LogoOption
-							bind:selected
-							clicked={selected.includes(id)}
-							{id}
-							logo={gdrive_direct_url}
+							bind:selected={selected[name]}
+							clicked={selected[name].length != 0}
+              {variants}
 							{name}
-							{filename}
 						/>
 					</span>
 				{/key}
 			{/each}
 
 			{#if finalPage}
-				{#each logos as { id, gdrive_direct_url, name, filename }}
-					{#if selected.includes(id)}
+				{#each logos as { variants, name }}
+					{#if selected[name].length != 0}
 						<span in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
-							<LogoOption
-								bind:selected
-								clicked={selected.includes(id)}
-								{id}
-								logo={gdrive_direct_url}
-								{name}
-								{filename}
-							/>
+						  <LogoOption
+							  bind:selected
+							  clicked={selected[name].length != 0}
+                {variants}
+							  {name}
+						  />
 						</span>
 					{/if}
 				{/each}