diff --git a/web/src/App.vue b/web/src/App.vue
index 6a188c8..63572b2 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -9,13 +9,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import { usePlayerStore } from './stores/player.js';
+import { useWebSocket } from './composables/useWebSocket.js';
 import Navbar from './components/Navbar.vue';
 import Player from './components/Player.vue';
 
 const playerStore = usePlayerStore();
 const theme = computed(() => playerStore.theme);
+const { connect } = useWebSocket();
+
+onMounted(() => {
+  playerStore.loadTheme();
+  connect();
+  playerStore.fetchBots();
+});
 </script>
 
 <style lang="scss">
diff --git a/web/src/components/Player.vue b/web/src/components/Player.vue
index 35d4ea1..9c84118 100644
--- a/web/src/components/Player.vue
+++ b/web/src/components/Player.vue
@@ -30,18 +30,25 @@
         @input="onVolumeChange"
         class="volume-slider"
       />
+      <button class="control-btn" @click="showQueue = !showQueue">
+        <Icon icon="mdi:playlist-music" />
+      </button>
       <RouterLink to="/lyrics" class="control-btn lyrics-btn">
         <Icon icon="mdi:microphone" />
       </RouterLink>
     </div>
+    <Queue :open="showQueue" @close="showQueue = false" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { Icon } from '@iconify/vue';
 import { usePlayerStore } from '../stores/player.js';
 import CoverArt from './CoverArt.vue';
+import Queue from './Queue.vue';
+
+const showQueue = ref(false);
 
 const store = usePlayerStore();
 const activeBot = computed(() => store.activeBot);
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index c78dfe9..c1720eb 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -54,11 +54,9 @@ import { ref, onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 import axios from 'axios';
 import { usePlayerStore } from '../stores/player.js';
-import { useWebSocket } from '../composables/useWebSocket.js';
 import CoverArt from '../components/CoverArt.vue';
 
 const store = usePlayerStore();
-const { connect } = useWebSocket();
 
 interface Playlist {
   id: string;
@@ -70,10 +68,6 @@ interface Playlist {
 const playlists = ref<Playlist[]>([]);
 
 onMounted(async () => {
-  store.loadTheme();
-  connect();
-  await store.fetchBots();
-
   try {
     const res = await axios.get('/api/music/recommend/playlists');
     playlists.value = res.data.playlists;