diff --git a/frontend/src/lib/components/QueueSlider.svelte b/frontend/src/lib/components/QueueSlider.svelte
index dec52c5..430a9bc 100644
--- a/frontend/src/lib/components/QueueSlider.svelte
+++ b/frontend/src/lib/components/QueueSlider.svelte
@@ -21,7 +21,7 @@
                         {#if i === 1}
                             <div class="absolute z-20 h-16 w-16 rounded-full border-2 border-black bg-white"></div>
                         {/if}
-                        <img class={`h-full overflow-hidden ${i === 1 ? "rounded-full" : "rounded"}`} src={song.image_id} alt="Song cover" />
+                        <img class={`h-full overflow-hidden ${i === 1 ? "rounded-full" : "rounded"}`} src={`https://lastfm.freetls.fastly.net/i/u/174s/${song.image_id}.png`} alt="Song cover" />
                     </div>
                     {#if i === 1}
                         <h1 class="mt-2">{song.title} - {song.artist}</h1>
diff --git a/frontend/src/lib/components/SuggestionInput.svelte b/frontend/src/lib/components/SuggestionInput.svelte
index c93c8b7..de8e437 100644
--- a/frontend/src/lib/components/SuggestionInput.svelte
+++ b/frontend/src/lib/components/SuggestionInput.svelte
@@ -1,7 +1,15 @@
 <script lang="ts">
+    let { roomId } = $props()
+
+    let input = $state("")
+
+    async function sendSong() {
+        let resp = await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
+        input = ""
+    }
 </script>
 
 <div class="flex h-full w-full flex-row items-center gap-2 rounded border-2 border-black p-4">
-    <input type="text" placeholder="Song & Artist" class="h-full w-3/4 rounded" />
-    <button class="w-1/4 rounded">Send</button>
+    <input type="text" placeholder="Song & Artist" class="h-full w-3/4 rounded" bind:value={input} />
+    <button class="w-1/4 rounded" onclick={sendSong}>Send</button>
 </div>
diff --git a/frontend/src/lib/components/SuggestionList.svelte b/frontend/src/lib/components/SuggestionList.svelte
index ba7ed69..16cc08c 100644
--- a/frontend/src/lib/components/SuggestionList.svelte
+++ b/frontend/src/lib/components/SuggestionList.svelte
@@ -1,32 +1,31 @@
 <script lang="ts">
-    import type { Song } from "$lib/types"
-    let { suggestions }: { suggestions: Song[] } = $props()
+    import type { Suggestion } from "$lib/types"
 
-    let reactiveSugg = $derived(
-        [...suggestions].sort((a, b) => {
-            return b.points - a.points
-        })
-    )
+    let { suggestions, roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
+
+    async function vote(amount: number, songId: string) {
+        await fetch(`/api/song/voting?room=${roomId}&song=${songId}&increment=${amount}`, { method: "POST" })
+    }
 </script>
 
 <div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
-    {#each reactiveSugg as sug}
+    {#each suggestions as sug}
         <div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-black p-2">
             <div class="flex w-3/4 flex-row gap-2">
-                <img class="w-[60px] min-w-[60px] rounded" src={sug.image} alt="Song cover" />
-                <h1>{sug.name}</h1>
+                <img class="w-[60px] min-w-[60px] rounded" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
+                <h1>{sug.title} - {sug.artist}</h1>
             </div>
             <div class="flex w-1/4 flex-row items-center justify-center gap-2">
                 <button
                     onclick={() => {
-                        sug.points += 1
-                    }}>🔥</button
+                        vote(1, sug.uuid)
+                    }}>+1</button
                 >
-                <p>{sug.points}</p>
+                <p>{sug.upvote}</p>
                 <button
                     onclick={() => {
-                        sug.points--
-                    }}>💩</button
+                        vote(-1, sug.uuid)
+                    }}>-1</button
                 >
             </div>
         </div>
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 85dff04..3f10d61 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -1,12 +1,12 @@
 import { z } from "zod"
 
-export const SongSchema = z.object({
+const SongSchema = z.object({
     uuid: z.string(),
     title: z.string(),
     artist: z.string(),
     tags: z.array(z.string()),
     image_id: z.string(),
-    youtube_id: z.number().optional().default(0),
+    youtube_id: z.string(),
 })
 export type Song = z.infer<typeof SongSchema>
 
@@ -25,3 +25,13 @@ export const createEmptySong = function (): Song {
         youtube_id: 0,
     }
 }
+
+const SuggestionSchema = SongSchema.extend({
+    upvote: z.number(),
+})
+export type Suggestion = z.infer<typeof SuggestionSchema>
+
+export const parseSuggestion = async function (sugg: any): Promise<Suggestion> {
+    let resp = await SuggestionSchema.parseAsync(sugg)
+    return resp
+}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 48f1755..3e7cfc2 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -2,11 +2,7 @@
 </script>
 
 <div class="flex h-full w-full items-center justify-center p-4">
-    <div class="w-1/2">
+    <div class="">
         <h1>Scan your nearby rooms</h1>
-        <a href="/room/123">Room Test</a>
-    </div>
-    <div>
-        <h1>Create your room</h1>
     </div>
 </div>
diff --git a/frontend/src/routes/room/[id]/+page.svelte b/frontend/src/routes/room/[id]/+page.svelte
index 31254dd..f3905e6 100644
--- a/frontend/src/routes/room/[id]/+page.svelte
+++ b/frontend/src/routes/room/[id]/+page.svelte
@@ -2,14 +2,17 @@
     import QueueSlider from "$lib/components/QueueSlider.svelte"
     import SuggestionInput from "$lib/components/SuggestionInput.svelte"
     import Error from "$lib/components/Error.svelte"
-    import { parseSong, type Song } from "$lib/types.js"
+    import { parseSong, parseSuggestion, type Suggestion, type Song } from "$lib/types.js"
     import { onMount } from "svelte"
+    import SuggestionList from "$lib/components/SuggestionList.svelte"
 
     let { data } = $props()
 
     let songs = $state<Song[]>([])
     let playing = $state(0)
 
+    let suggestions = $state<Suggestion[]>([])
+
     let error = $state({ code: 0, message: "" })
 
     onMount(async () => {
@@ -23,6 +26,25 @@
 
         // Setup websocket connection
 
+        // Get room suggestions
+
+        resp = await fetch("/api/room/suggestions?room=" + data.roomId)
+
+        if (resp.status != 200) {
+            error = { code: 500, message: "Failed to retrive suggestions" }
+            return
+        }
+
+        let json = await resp.json()
+
+        json["songs"].forEach(async (i: any) => {
+            suggestions.push(await parseSuggestion(i))
+        })
+
+        suggestions = suggestions.sort((a, b) => {
+            return a.upvote - b.upvote
+        })
+
         // Get the room queue
 
         resp = await fetch("/api/queue?room=" + data.roomId)
@@ -30,13 +52,12 @@
             error = { code: 404, message: "Room not found" }
             return
         }
-        let json = await resp.json()
+        json = await resp.json()
 
         json["queue"].forEach(async (i: any) => {
             songs.push(await parseSong(i))
         })
-
-        // Get room suggestions
+        console.log(songs)
     })
 </script>
 
@@ -47,10 +68,10 @@
     <div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
         <QueueSlider {songs} {playing} />
         <div class="w-full py-6 lg:w-[30vw]">
-            <SuggestionInput />
+            <SuggestionInput roomId={data.roomId} />
         </div>
         <div class="w-full py-6 lg:w-[30vw]">
-            <!-- <SuggestionList suggestions={songs} /> -->
+            <SuggestionList {suggestions} roomId={data.roomId} />
         </div>
     </div>
 {/if}