From e3384eaa217e6c188b837576ef57eeef63184fcf Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Wed, 4 Feb 2026 16:48:25 +0000
Subject: [PATCH] fix title alignment

---
 nginx/vue/src/components/home/Listening.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/nginx/vue/src/components/home/Listening.vue b/nginx/vue/src/components/home/Listening.vue
index 4e54dd5..3549f53 100644
--- a/nginx/vue/src/components/home/Listening.vue
+++ b/nginx/vue/src/components/home/Listening.vue
@@ -1,4 +1,5 @@
 <script setup>
+import Header from "@/components/text/Header.vue";
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useSongsStore } from "@/stores/songs";
 
@@ -32,12 +33,16 @@ onUnmounted(() => {
         <div
             @click="nextSong"
             :key="song.track.id"
-            class="flex flex-col items-center text-center"
+            class="flex flex-col items-center"
         >
-            <h2>Listening To</h2>
+            <Header>Listening To</Header>
             <img :src="song.track.album.images[0].url" />
-            <p><strong>Song:</strong> {{ song.track.name }}</p>
-            <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
+            <p class="text-center">
+                <strong>Song:</strong> {{ song.track.name }}
+            </p>
+            <p class="text-center">
+                <strong>Artist:</strong> {{ song.track.artists[0].name }}
+            </p>
         </div>
     </Transition>
 </template>