diff --git a/frontend/src/lib/components/SuggestionInput.svelte b/frontend/src/lib/components/SuggestionInput.svelte
index 8cc5a9a..d23b878 100644
--- a/frontend/src/lib/components/SuggestionInput.svelte
+++ b/frontend/src/lib/components/SuggestionInput.svelte
@@ -1,20 +1,33 @@
 <script lang="ts">
     import { LoaderCircle } from "@lucide/svelte"
 
+    const COOLDOWN_SECS = 30
+
     let { roomId } = $props()
     let input = $state("")
-    let disabled: boolean = $state(false)
+    let loading: boolean = $state(false)
+    let cooldowned: boolean = $state(false)
+
+    $effect(() => {
+        console.log("cooldowned is now", cooldowned)
+    })
 
     async function sendSong() {
-        disabled = true
+        loading = true
         await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
         input = ""
-        disabled = false
+        loading = false
+
+        cooldowned = true
+        setTimeout(() => {
+            cooldowned = false
+            console.log("unset cooldown")
+        }, COOLDOWN_SECS * 1000)
     }
 </script>
 
 <div
-    class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${disabled ? "disabled" : ""}`}
+    class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${loading ? "disabled" : ""}`}
 >
     <input
         type="text"
@@ -26,16 +39,20 @@
                 sendSong()
             }
         }}
-        {disabled}
+        disabled={loading}
     />
-    {#if disabled}
+    {#if loading}
         <span class="animate-spin">
             <LoaderCircle />
         </span>
     {/if}
 
-    <button class="i-lucide-check h-[40px] w-1/4 cursor-pointer rounded border border-0 font-semibold shadow-xl duration-100 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue" onclick={sendSong}
-        >Add</button
+    <button
+        disabled={cooldowned}
+        class="i-lucide-check h-[40px] w-1/4 rounded font-semibold shadow-xl duration-100 active:scale-90 {!cooldowned
+            ? 'cursor-pointer bg-light-pine-blue hover:scale-105 dark:bg-dark-pine-blue '
+            : 'bg-light-pine-muted dark:bg-light-pine-muted'}"
+        onclick={sendSong}>Add</button
     >
     <span class="i-lucide-chevrons-left"></span>
 </div>
diff --git a/frontend/src/lib/components/SuggestionList.svelte b/frontend/src/lib/components/SuggestionList.svelte
index 6f5d649..193b33c 100644
--- a/frontend/src/lib/components/SuggestionList.svelte
+++ b/frontend/src/lib/components/SuggestionList.svelte
@@ -7,9 +7,8 @@
 
     let picked_suggestions: string[] = $state([])
 
-    async function vote(idx: number, amount: number, songId: string) {
+    async function vote(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")
@@ -26,7 +25,7 @@
         <p>No suggestions yet! Try to add a new one using the Add button</p>
     {/if}
 
-    {#each suggestions as sug, idx}
+    {#each suggestions as sug}
         <div
             class="flex h-[80px] w-full flex-row gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay p-2 shadow-md duration-100 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
         >
@@ -48,7 +47,8 @@
                     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)
+                        sug.upvode += 1
+                        await vote(1, sug.uuid)
                     }}><ThumbsUp /></button
                 >
                 <p class="font-semibold text-light-pine-text dark:text-dark-pine-text">{sug.upvote}</p>
@@ -56,7 +56,8 @@
                     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)
+                        sug.upvode += 1
+                        await vote(-1, sug.uuid)
                     }}><ThumbsDown /></button
                 >
             </div>