diff --git a/web/package.json b/web/package.json
index b41f298..4f6ffbc 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,6 +11,9 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^7.3.1",
+    "@fortawesome/fontawesome-svg-core": "^7.3.1",
+    "@fortawesome/free-regular-svg-icons": "^7.3.1",
     "pinia": "^4.0.2",
     "vue": "^3.5.40",
     "vue-router": "^5.2.0"
@@ -24,14 +27,14 @@
     "@vue/tsconfig": "^0.9.1",
     "eslint-plugin-vue": "^10.10.0",
     "globals": "^17.11.0",
+    "musickitjs-v3-types": "^1.0.0",
     "npm-run-all2": "^9.0.2",
     "sass-embedded": "^1.103.1",
     "typescript": "~6.0.0",
     "typescript-eslint": "^8.67.0",
     "vite": "^8.1.5",
     "vite-plugin-vue-devtools": "^8.1.5",
-    "vue-tsc": "^3.3.7",
-    "musickitjs-v3-types": "^1.0.0"
+    "vue-tsc": "^3.3.7"
   },
   "engines": {
     "node": "^22.18.0 || >=24.12.0"
diff --git a/web/src/App.vue b/web/src/App.vue
index b841e7d..72561e6 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -57,7 +57,7 @@
         --secondary-color: white;
         --background-color: rgb(221, 221, 221);
         --nav-background: white;
-        --hover-color: #00457a;
+        --accent-color: #00457a;
         --popup-color: rgb(224, 224, 224);
         --overlay-color: rgba(0, 0, 0, 0.7);
         --PI: 3.14159265358979;
@@ -74,7 +74,7 @@
         --background-color: rgb(32, 32, 32);
         --nav-background: rgb(54, 54, 54);
         --popup-color: rgb(58, 58, 58);
-        --hover-color: #007ddd;
+        --accent-color: #007ddd;
         --overlay-color: rgba(104, 104, 104, 0.575);
         --gray-color: rgb(207, 207, 207);
         --footer-background: rgb(53, 53, 53);
@@ -90,7 +90,7 @@
             --background-color: rgb(32, 32, 32);
             --nav-background: rgb(54, 54, 54);
             --popup-color: rgb(58, 58, 58);
-            --hover-color: #007ddd;
+            --accent-color: #007ddd;
             --overlay-color: rgba(104, 104, 104, 0.575);
             --gray-color: rgb(207, 207, 207);
             --footer-background: rgb(53, 53, 53);
diff --git a/web/src/components/PlaylistPicker.vue b/web/src/components/PlaylistPicker.vue
index e69de29..ee3adef 100644
--- a/web/src/components/PlaylistPicker.vue
+++ b/web/src/components/PlaylistPicker.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        Hello World
+    </div>
+</template>
diff --git a/web/src/components/PopupElement.vue b/web/src/components/PopupElement.vue
index 534622b..2724bdf 100644
--- a/web/src/components/PopupElement.vue
+++ b/web/src/components/PopupElement.vue
@@ -22,7 +22,7 @@
 </script>
 
 
-<style scoped>
+<style scoped lang="scss">
     .popup-backdrop {
         width: 100vw;
         height: 100vh;
@@ -37,29 +37,29 @@
         transition: all 0.5s;
         transform: scale(1);
         z-index: 99;
-    }
 
-    .hidden {
-        transform: scale(0);
-    }
+        &.hidden {
+            transform: scale(0);
+        }
 
-    .popup-main {
-        width: 40%;
-        height: 50%;
-        background-color: var( --secondary-color );
-        padding: 2.5%;
-        border-radius: 20px;
-        position: relative;
-        overflow-y: scroll;
-        display: block;
-    }
+        >.popup-main {
+            width: 40%;
+            height: 50%;
+            background-color: var( --secondary-color );
+            padding: 2.5%;
+            border-radius: 20px;
+            position: relative;
+            overflow-y: scroll;
+            display: block;
 
-    .close-icon {
-        position: absolute;
-        top: 20px;
-        right: 20px;
-        font-size: 2rem;
-        cursor: pointer;
-        user-select: none;
+            >.close-icon {
+                position: absolute;
+                top: 20px;
+                right: 20px;
+                font-size: 2rem;
+                cursor: pointer;
+                user-select: none;
+            }
+        }
     }
 </style>
diff --git a/web/src/components/QueueViewer.vue b/web/src/components/QueueViewer.vue
new file mode 100644
index 0000000..b3fabf5
--- /dev/null
+++ b/web/src/components/QueueViewer.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+    import {
+        beautifyTime
+    } from '@/ts/util/time';
+    import player from '@/ts/player';
+
+    const queue = player.queue;
+    const idx = player.queueIdx;
+    const isPlaying = player.isPlaying;
+
+</script>
+
+<template>
+    <div>
+        <div>
+            <button>
+                <i class="fa-solid fa-plus"></i>
+                Add
+            </button>
+            <button>
+                <i class="fa-solid fa-xmark"></i>
+                Clear
+            </button>
+            <button>
+                <i class="fa-solid fa-save"></i>
+                Save
+            </button>
+            <!-- TODO: Should only appear when sharing -->
+            <button>
+                <i class="fa-solid fa-paper-plane"></i>
+                Transmit
+            </button>
+        </div>
+        <div>
+            <div v-for="(song, index) in queue" :key="index">
+                <div class="song-cover-wrapper">
+                    <img
+                        v-if="song.cover"
+                        :src="song.cover"
+                        alt="Song cover"
+                        class="song-cover"
+                    >
+                    <i v-else class="fa-solid fa-music song-cover"></i>
+                    <div v-if="isPlaying && index === idx" class="playing-symbols">
+                        <div id="bar-1" class="playing-bar"></div>
+                        <div id="bar-2" class="playing-bar"></div>
+                        <div id="bar-3" class="playing-bar"></div>
+                    </div>
+                    <i v-else class="fa-solid fa-play play-pause" @click="() => player.playIndex( index )"></i>
+                    <i class="fa-solid fa-pause play-pause" @click="player.pause"></i>
+                </div>
+                <div>
+                    <h3>{{ song.name }}</h3>
+                    <p>{{ song.artist }}</p>
+                    <p>{{ beautifyTime( song.duration ) }}</p>
+                    <p>{{ song['additional-info'] }}</p>
+                </div>
+                <div>
+                    <i class="fa-solid fa-trash-can"></i>
+                    <i class="fa-solid fa-pen-to-square"></i>
+                    <i class="fa-solid fa-grip-vertical"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/web/src/components/SortableList.vue b/web/src/components/SortableList.vue
new file mode 100644
index 0000000..b62f1d3
--- /dev/null
+++ b/web/src/components/SortableList.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+    const queue = defineModel<unknown[]>();
+</script>
+
+<template>
+    <div>
+        <div v-for="(song, index) in queue" :key="index">
+            <slot :item="song"></slot>
+            <div>
+                <i class="fa-solid fa-grip-vertical"></i>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/web/src/views/AppView.vue b/web/src/views/AppView.vue
index 79800fe..a9efe83 100644
--- a/web/src/views/AppView.vue
+++ b/web/src/views/AppView.vue
@@ -1,5 +1,12 @@
+<script setup lang="ts">
+    import QueueViewer from '@/components/QueueViewer.vue';
+
+
+</script>
+
 <template>
     <div>
         <h1>Player</h1>
+        <QueueViewer />
     </div>
 </template>