diff --git a/frontend/src/lib/components/SuggestionList.svelte b/frontend/src/lib/components/SuggestionList.svelte
index 2494254..6f5d649 100644
--- a/frontend/src/lib/components/SuggestionList.svelte
+++ b/frontend/src/lib/components/SuggestionList.svelte
@@ -1,13 +1,24 @@
 <script lang="ts">
     import type { Suggestion } from "$lib/types"
     import { ThumbsUp, ThumbsDown } from "@lucide/svelte"
+    import { onMount } from "svelte"
 
     let { suggestions = $bindable(), roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
 
+    let picked_suggestions: string[] = $state([])
+
     async function vote(idx: number, amount: number, songId: string) {
+        if (picked_suggestions.includes(songId)) return console.log("rejecting vote")
         suggestions[idx].upvote += amount
         await fetch(`/api/song/voting?room=${roomId}&song=${songId}&increment=${amount}`, { method: "POST" })
+        picked_suggestions.push(songId)
+        console.log("accepted vote")
+        sessionStorage.setItem("picked_suggestions", JSON.stringify(picked_suggestions))
     }
+
+    onMount(() => {
+        picked_suggestions = JSON.parse(sessionStorage.getItem("picked_suggestions") ?? "[]")
+    })
 </script>
 
 <div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
@@ -34,14 +45,16 @@
             </div>
             <div class="flex w-1/4 flex-row items-center justify-center gap-2">
                 <button
-                    class="text-green-500"
+                    class={!picked_suggestions.includes(sug.uuid) ? "text-light-pine-green duration-100 hover:scale-150 dark:text-dark-pine-green" : "text-light-pine-muted dark:text-dark-pine-muted"}
+                    disabled={!!picked_suggestions.includes(sug.uuid)}
                     onclick={async () => {
                         await vote(idx, 1, sug.uuid)
                     }}><ThumbsUp /></button
                 >
-                <p class="font-semibold text-white">{sug.upvote}</p>
+                <p class="font-semibold text-light-pine-text dark:text-dark-pine-text">{sug.upvote}</p>
                 <button
-                    class="text-red-500 duration-100 hover:scale-150"
+                    class={!picked_suggestions.includes(sug.uuid) ? "text-light-pine-red duration-100 hover:scale-150 dark:text-dark-pine-red" : "text-light-pine-muted dark:text-dark-pine-muted"}
+                    disabled={!!picked_suggestions.includes(sug.uuid)}
                     onclick={async () => {
                         await vote(idx, -1, sug.uuid)
                     }}><ThumbsDown /></button