diff --git a/app/app.vue b/app/app.vue
index d149f07..aa885f2 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,3 +1,14 @@
+<script setup lang="ts">
+const { currentSong, isPlaying } = usePlayer()
+
+useHead({
+	titleTemplate: (titleChunk) =>
+		currentSong.value && isPlaying.value
+			? `${currentSong.value.name} - Now Playing - Music`
+			: `${titleChunk || "Home"} - Music`,
+})
+</script>
+
 <template>
 	<ToastContainer />
 	<NuxtLayout>
diff --git a/app/pages/admin.vue b/app/pages/admin.vue
index f805b6b..f5081ca 100644
--- a/app/pages/admin.vue
+++ b/app/pages/admin.vue
@@ -2,6 +2,7 @@
 definePageMeta({
 	layout: "admin",
 })
+useHead({ title: "Admin" })
 </script>
 
 <template>
diff --git a/app/pages/admin/albums.vue b/app/pages/admin/albums.vue
index af55cdb..cafb35a 100644
--- a/app/pages/admin/albums.vue
+++ b/app/pages/admin/albums.vue
@@ -137,6 +137,7 @@ const show = (id?: string) => {
 
 	showModal.value = true
 }
+useHead({ title: "Admin - Albums" })
 </script>
 
 <template>
diff --git a/app/pages/admin/artists.vue b/app/pages/admin/artists.vue
index ec91c9f..5f94ac2 100644
--- a/app/pages/admin/artists.vue
+++ b/app/pages/admin/artists.vue
@@ -87,6 +87,7 @@ const show = (id?: string) => {
 
 	showModal.value = true
 }
+useHead({ title: "Admin - Artists" })
 </script>
 
 <template>
diff --git a/app/pages/admin/genre.vue b/app/pages/admin/genre.vue
index 36db8c7..26f4275 100644
--- a/app/pages/admin/genre.vue
+++ b/app/pages/admin/genre.vue
@@ -79,6 +79,7 @@ const show = (id?: string) => {
 
 	showModal.value = true
 }
+useHead({ title: "Admin - Genres" })
 </script>
 
 <template>
diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
index e519b41..1191ee6 100644
--- a/app/pages/admin/index.vue
+++ b/app/pages/admin/index.vue
@@ -1,3 +1,4 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">useHead({ title: "Admin" })
+</script>
 
 <template></template>
diff --git a/app/pages/admin/songs.vue b/app/pages/admin/songs.vue
index 8971ca6..f8cb620 100644
--- a/app/pages/admin/songs.vue
+++ b/app/pages/admin/songs.vue
@@ -219,6 +219,7 @@ const show = (id?: string) => {
 
 	showModal.value = true
 }
+useHead({ title: "Admin - Songs" })
 </script>
 
 <template>
diff --git a/app/pages/album/[id].vue b/app/pages/album/[id].vue
index 8bd2346..da8b8be 100644
--- a/app/pages/album/[id].vue
+++ b/app/pages/album/[id].vue
@@ -9,6 +9,7 @@ const { data: tracksData } = await useApiFetch<Track[]>(
 )
 
 const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
+useHead({ title: computed(() => albumData.value ? `${albumData.value.name} - Album` : "Album") })
 </script>
 
 <template>
diff --git a/app/pages/artist/[id]/index.vue b/app/pages/artist/[id]/index.vue
index 5f4b3a1..f721106 100644
--- a/app/pages/artist/[id]/index.vue
+++ b/app/pages/artist/[id]/index.vue
@@ -36,6 +36,7 @@ const scrollWidth = () => {
 }
 
 const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
+useHead({ title: computed(() => artistData.value ? `${artistData.value.name} - Artist` : "Artist") })
 </script>
 
 <template>
diff --git a/app/pages/artist/[id]/tracks.vue b/app/pages/artist/[id]/tracks.vue
index a2103c0..0579b26 100644
--- a/app/pages/artist/[id]/tracks.vue
+++ b/app/pages/artist/[id]/tracks.vue
@@ -7,6 +7,7 @@ const { data: tracksData } = await useApiFetch<Track[]>(
 )
 
 const { playAlbumAtIndex } = usePlayer()
+useHead({ title: "Artist Songs" })
 </script>
 
 <template>
diff --git a/app/pages/auth.vue b/app/pages/auth.vue
index 4b5eaef..6211978 100644
--- a/app/pages/auth.vue
+++ b/app/pages/auth.vue
@@ -2,6 +2,7 @@
 definePageMeta({
 	layout: false,
 })
+useHead({ title: "Sign In" })
 </script>
 
 <template>
diff --git a/app/pages/auth/signin.vue b/app/pages/auth/signin.vue
index a3bab24..b5f6a45 100644
--- a/app/pages/auth/signin.vue
+++ b/app/pages/auth/signin.vue
@@ -15,6 +15,7 @@ const submit = async (e: any) => {
 		toast.show(e, "error")
 	}
 }
+useHead({ title: "Sign In" })
 </script>
 
 <template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 38cd90e..bad288b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,4 +1,5 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">useHead({ title: "Home" })
+</script>
 
 <template>
 	<h1>Home</h1>
diff --git a/app/pages/library/albums.vue b/app/pages/library/albums.vue
index cc340bc..7d9cb29 100644
--- a/app/pages/library/albums.vue
+++ b/app/pages/library/albums.vue
@@ -1 +1,5 @@
+<script setup lang="ts">
+useHead({ title: "Albums" })
+</script>
+
 <template></template>
diff --git a/app/pages/library/artists.vue b/app/pages/library/artists.vue
index cc340bc..b47c9c9 100644
--- a/app/pages/library/artists.vue
+++ b/app/pages/library/artists.vue
@@ -1 +1,5 @@
+<script setup lang="ts">
+useHead({ title: "Artists" })
+</script>
+
 <template></template>
diff --git a/app/pages/library/songs.vue b/app/pages/library/songs.vue
index cc340bc..7ff1282 100644
--- a/app/pages/library/songs.vue
+++ b/app/pages/library/songs.vue
@@ -1 +1,5 @@
+<script setup lang="ts">
+useHead({ title: "Songs" })
+</script>
+
 <template></template>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 7ca5796..bcf87e8 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -80,6 +80,7 @@ watch(currentSong, (track) => {
 const playResult = (result: SearchResult | Track) => {
 	if ("album" in result && result.album) playAlbum([result as Track])
 }
+useHead({ title: computed(() => query.value ? `Search: ${query.value}` : "Search") })
 </script>
 
 <template>