diff --git a/web/package-lock.json b/web/package-lock.json
index ff84062..47b7c60 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -16,6 +16,7 @@
 				"eslint-plugin-svelte": "^2.30.0",
 				"flowbite": "^1.8.1",
 				"flowbite-svelte": "^0.44.18",
+				"flowbite-svelte-icons": "^0.4.4",
 				"postcss": "^8.4.24",
 				"postcss-load-config": "^4.0.1",
 				"prettier": "^2.8.0",
@@ -1678,6 +1679,17 @@
 				"svelte": "^4.0.0"
 			}
 		},
+		"node_modules/flowbite-svelte-icons": {
+			"version": "0.4.4",
+			"resolved": "https://registry.npmjs.org/flowbite-svelte-icons/-/flowbite-svelte-icons-0.4.4.tgz",
+			"integrity": "sha512-fOZri6HYYyo13olXQzvoid19hlYR/HjzQobpzBPkj8QseCJ9R1uWR7bNlhPl5vFCElqcfm3UooYiwT4rKKiqzQ==",
+			"dev": true,
+			"peerDependencies": {
+				"svelte": "^3.54.0 || ^4.0.0",
+				"tailwind-merge": "^1.13.2",
+				"tailwindcss": "^3.3.2"
+			}
+		},
 		"node_modules/fraction.js": {
 			"version": "4.3.7",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
diff --git a/web/package.json b/web/package.json
index 1a41d44..54cf01d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -18,6 +18,7 @@
 		"eslint-plugin-svelte": "^2.30.0",
 		"flowbite": "^1.8.1",
 		"flowbite-svelte": "^0.44.18",
+		"flowbite-svelte-icons": "^0.4.4",
 		"postcss": "^8.4.24",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.0",
diff --git a/web/src/lib/queue.js b/web/src/lib/queue.js
index 7c1e842..9be1f27 100644
--- a/web/src/lib/queue.js
+++ b/web/src/lib/queue.js
@@ -74,27 +74,21 @@ export async function RemoveFromQueue() { // AKA skip
     }
 }
 
-export async function GetQueue() {
-    let GuildID = document.getElementById("id").value;
-    let token = document.getElementById("token").value;
-
+export async function GetQueue(GuildID, token) {
     // Request
-    let route = `https://gerry.thetipo.rocks/queue/${GuildID}`
+    let route = `https://gerry.thetipo.rocks/queue/${GuildID}?` + new URLSearchParams({"token": token}).toString()
     let response = await fetch(route, {
         method: "GET",
         headers: {
             'Accept': 'application/json',
-            'Content-Type': 'application/x-www-form-urlencoded'
-        },
-        body: {
-            'token': token,
+            'Content-Type': 'application/x-www-form-urlencoded',
         },
     })
 
     // Error Handling
     switch(response.status) {
         case 200:
-            return response.json();
+            return await response.json();
         case 401:
             return -1;
     }
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 92600cd..474f896 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,21 +1,26 @@
 <script>
     import Queue from "./queue.svelte";
-    import Song from "./song.svelte"
     import Favorites from "./favorites.svelte"
-    import {Heading} from "flowbite-svelte"
+    import { Tabs, TabItem} from "flowbite-svelte"
+    import StarSolid from "flowbite-svelte-icons/StarSolid.svelte"
+    import ListMusicSolid from "flowbite-svelte-icons/ListMusicSolid.svelte"
 </script>
-<Heading tag="h1" align="center">Gerry UI</Heading>
-<div class="grid grid-cols-3 gap-4 m-5 items-center justify-item-center">
-    <div>
-        <Heading tag="h4">Queue</Heading>
+<Tabs style="underline">
+    <TabItem open>
+        <div slot="title" class="flex items-center gap-2">
+            <ListMusicSolid />
+            Queue
+        </div>
         <Queue />
-    </div>
-    <div>
-        <Song />
-    </div>
-    <div>
-        <Heading tag="h4">Favorites</Heading>
+    </TabItem>
+    <TabItem>
+        <div slot="title" class="flex items-center gap-2">
+            <StarSolid />
+            Favorites
+        </div>
         <Favorites />
-    </div>
+    </TabItem>
+</Tabs>
+<div >
 </div>
 
diff --git a/web/src/routes/favorites.svelte b/web/src/routes/favorites.svelte
index 619dacb..0912cdd 100644
--- a/web/src/routes/favorites.svelte
+++ b/web/src/routes/favorites.svelte
@@ -1,27 +1,11 @@
 <script>
-    import {Heading} from "flowbite-svelte"
-    import {Button, Dropdown, DropdownItem } from "flowbite-svelte"
+    import { Button } from "flowbite-svelte";
 </script>
 
-<div class="grid grid-row-3 gap-4">
-    <Button>Add to favorites</Button>
-    <Dropdown>
-        <DropdownItem>
+<Button class="w-25 absolute right-9 bottom-5">
+    Add to Favorites
+</Button>
+<div class="grid grid-col-2 gap-4">
 
-        </DropdownItem>
-    </Dropdown>
 
-    <Button>Remove from favorites</Button>
-    <Dropdown>
-        <DropdownItem>
-            
-        </DropdownItem>
-    </Dropdown>
-
-    <Button>Show favorites</Button>
-    <Dropdown>
-        <DropdownItem>
-            
-        </DropdownItem>
-    </Dropdown>
 </div>
diff --git a/web/src/routes/queue.svelte b/web/src/routes/queue.svelte
index d7ea0c4..9a70d22 100644
--- a/web/src/routes/queue.svelte
+++ b/web/src/routes/queue.svelte
@@ -1,56 +1,43 @@
 <script>
-    import {AddToQueue, RemoveFromQueue, GetQueue} from '../lib/queue'
-    import {Label, Input} from 'flowbite-svelte'
-    import {Button, Dropdown, DropdownItem } from "flowbite-svelte"
+    import {Button} from "flowbite-svelte";
+    import {Avatar} from "flowbite-svelte"
+    import {P, Heading, A} from "flowbite-svelte";
+	import { GetQueue, AddToQueue, RemoveFromQueue } from "../lib/queue";
+    import PlaySolid from "flowbite-svelte-icons/PlaySolid.svelte"
+    import PauseSolid from "flowbite-svelte-icons/PauseSolid.svelte"
+    let queue = GetQueue("145618799947677696", "iAADRNu7eEfcHmcT9j9pbUsI4Rff7ihG");
 </script>
 
-<div class="grid grid-row-3 gap-4">
-    <Button>Add a song to the queue</Button>
-    <Dropdown>
-        <DropdownItem>
-            <form>
-                <Label for="id" class="block mb-2">Guild ID</Label> 
-                <Input type="text" id="id" /> 
-                <Label for="link" class="mt-2">Song name or link</Label> 
-                <Input type="text" id="song" />
-                <Label for="token" class="mt-2">User token</Label> 
-                <Input type="text" id="token" /> 
-                <Label for="playlist" class="mt-2"> Playlist </Label>
-                <Input type="checkbox" id="playlist" />
-                <Label for="shuffle" class="mt-2"> Shuffle </Label>
-                <Input type="checkbox" id="shuffle" />
-                <Label for="loop" class="mt-2"> Loop </Label>
-                <Input type="checkbox" id="loop" />
-                <Label for="priority" class="mt-2"> Priority </Label>
-                <Input type="checkbox" id="priority" />
-            
-                <Button class="mt-2" on:click={AddToQueue} >Submit</Button>
-            </form>
-        </DropdownItem>
-    </Dropdown>
-    <Button>Skip song</Button>
-    <Dropdown>
-        <DropdownItem>
-            <form>
-                <Label for="id" class="block mb-2">Guild ID</Label> 
-                <Input type="text" id="id" /> 
-                <Label for="clear" class="mt-2">Clear queue?</Label> 
-                <Input type="checkbox" id="clear" />
+<Button class="w-25 absolute right-9 bottom-5">
+    Add to Queue
+</Button>
 
-                <Button class="mt-2" on:click={RemoveFromQueue} >Submit</Button>
-            </form>
-        </DropdownItem>
-    </Dropdown>
-    <Button>Show queue</Button>
-    <Dropdown>
-        <DropdownItem>
-            <Label for="id" class="block mb-2"> Guild ID</Label>
-            <Input type="text" id="id" /> 
-            <Label for="token" class="mt-2">User token</Label> 
-            <Input type="text" id="token" />
-            
-            <Button class="mt-2" on:click={GetQueue} >Submit</Button>
-        </DropdownItem>
-    </Dropdown>
 
-</div>
\ No newline at end of file
+
+{#await queue} 
+<P>Fetching Queue</P>
+{:then json}
+<div class="grid grid-cols-2 gap-4">
+    <div >
+        <img alt="thumbnail" src={json[0].thumbnail} class=""/>
+        <div class="mt-5 grid grid-cols-2">
+            <div class="justify-self-end"><PauseSolid /></div>
+            <div class="justify-self-start"><PlaySolid  /></div>
+        </div>
+        <P class="mt-5">{json[0].title}</P>
+        <P>Requested by {json[0].user}</P>
+    </div>
+    <div>
+        <Heading tag="h4" class="mb-5" align="center">Queue</Heading>
+        {#each json as song, index}
+            {#if index != 0}
+            <div class="grid grid-cols-3 justify-items-center mt-3" >
+                <Avatar src={song.thumbnail} rounded/>
+                <A href={song.link}>{song.title}</A>
+                <P>{song.duration}</P>
+            </div>
+            {/if}
+        {/each}
+    </div>
+</div>
+    {/await}
diff --git a/web/src/routes/song.svelte b/web/src/routes/song.svelte
deleted file mode 100644
index 3cc45cd..0000000
--- a/web/src/routes/song.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-    import {Heading} from "flowbite-svelte"
-</script>
-
-<Heading tag="h3">Song</Heading>
\ No newline at end of file