diff --git a/front/src/components/About.vue b/front/src/components/About.vue
index 92bafd7afddde359aa7ffef0b7a2fb1e4b531e29..09a5ee24c523f8f8f5db77b47b7c6694ae74387b 100644
--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'About This Instance'">
     <div class="ui vertical center aligned stripe segment">
       <div class="ui text container">
         <h1 class="ui huge header">
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index ad1ad93cb08c2a29cff5b84859b769345dee9872..0e24dcd59008c52fe198e6a1778d9d1e0c00545c 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Welcome'">
     <div class="ui vertical center aligned stripe segment">
       <div class="ui text container">
         <h1 class="ui huge header">
-            Welcome on funkwhale
+            Welcome on Funkwhale
         </h1>
         <p>We think listening music should be simple.</p>
         <router-link class="ui icon button" to="/about">
@@ -143,9 +143,7 @@
 export default {
   name: 'home',
   data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
+    return {}
   }
 }
 </script>
diff --git a/front/src/components/PageNotFound.vue b/front/src/components/PageNotFound.vue
index 3b88a6921f05d69aa49a5c7a965e509c3725249a..25e6f86fd209a7cb6132c9c36812e918c1f116f9 100644
--- a/front/src/components/PageNotFound.vue
+++ b/front/src/components/PageNotFound.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Page Not Found'">
     <div class="ui vertical stripe segment">
       <div class="ui text container">
         <h1 class="ui huge header">
diff --git a/front/src/components/auth/Login.vue b/front/src/components/auth/Login.vue
index 2cf6d5f6db1cd8bc4e4d72d96be5c70d559e9452..d232da2a35e38d4f774072fb049473ac5cfa1e86 100644
--- a/front/src/components/auth/Login.vue
+++ b/front/src/components/auth/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Log In'">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>Log in to your Funkwhale account</h2>
diff --git a/front/src/components/auth/Logout.vue b/front/src/components/auth/Logout.vue
index fbacca70338ed295dc284664d443c9b239b25da0..980740c94cfc415e5afc467186c14d1a193748cc 100644
--- a/front/src/components/auth/Logout.vue
+++ b/front/src/components/auth/Logout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Log Out'">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>Are you sure you want to log out?</h2>
diff --git a/front/src/components/auth/Profile.vue b/front/src/components/auth/Profile.vue
index 54af5a11c4c0027fc68f81e9c6eca283d4ed8aee..9fafccffa83f0e9b63ac6a692de586a4adf9e4f8 100644
--- a/front/src/components/auth/Profile.vue
+++ b/front/src/components/auth/Profile.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="username + '\'s Profile'">
     <div v-if="isLoading" class="ui vertical segment">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 8cd03d75580aa52f4e7e382a5a6ec0278cb3db92..859c0d04b97ccecb97911575ad505cdda475ebf5 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Account Settings'">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2 class="ui header">Account settings</h2>
diff --git a/front/src/components/auth/Signup.vue b/front/src/components/auth/Signup.vue
index 749d2eb0254a5d55b163532afff252302b4d50e6..39ca366631367afe452e3dddcaf54f56ad5f511a 100644
--- a/front/src/components/auth/Signup.vue
+++ b/front/src/components/auth/Signup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Sign Up'">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>Create a funkwhale account</h2>
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index c65144a93bf9c6ae1c43f0148f2df75ee4be9105..dbef186b6b5c7d8a6aec611b798ab22a41f03362 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Your Favorites'">
     <div class="ui vertical center aligned stripe segment">
       <div :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
         <div class="ui text loader">Loading your favorites...</div>
diff --git a/front/src/components/library/Album.vue b/front/src/components/library/Album.vue
index 65768aafe7851868b35030e2b6273dfbcfefc3b7..1e96757c342a9b325cb293f8363ea2078f358aff 100644
--- a/front/src/components/library/Album.vue
+++ b/front/src/components/library/Album.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div v-if="isLoading" class="ui vertical segment">
+    <div v-if="isLoading" class="ui vertical segment" v-title="'Album'">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
     <template v-if="album">
-      <div :class="['ui', 'head', {'with-background': album.cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
+      <div :class="['ui', 'head', {'with-background': album.cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="album.title">
         <div class="segment-content">
           <h2 class="ui center aligned icon header">
             <i class="circular inverted sound yellow icon"></i>
diff --git a/front/src/components/library/Artist.vue b/front/src/components/library/Artist.vue
index 9a546aa0e9fa98aa4bdda13fcde57fd6ad4b2986..07d8cbbc74cff682e2251eb0c22515ca0fc8a9c0 100644
--- a/front/src/components/library/Artist.vue
+++ b/front/src/components/library/Artist.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div v-if="isLoading" class="ui vertical segment">
+    <div v-if="isLoading" class="ui vertical segment" v-title="'Artist'">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
     <template v-if="artist">
-      <div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
+      <div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="artist.name">
         <div class="segment-content">
           <h2 class="ui center aligned icon header">
             <i class="circular inverted users violet icon"></i>
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 52ccbdd7465c654b28eb53c141f50a6e62ca0209..72ad108f1d2d78ce32357753d163045284263715 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-title="'Artists'">
     <div class="ui vertical stripe segment">
       <h2 class="ui header">Browsing artists</h2>
       <div :class="['ui', {'loading': isLoading}, 'form']">
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 40f6808f98f3c382353fd9bb205d3c09cbbcb8bd..26352d1fd6c0314129dc7e212d7ddb7d97dd4519 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-title="'Home'">
     <div class="ui vertical stripe segment">
       <search :autofocus="true"></search>
     </div>
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 303ce100ecf35ec46be8d6909b03398dbe125826..7ab14ab14f8d3dbc4fa02a52c34758d69b38b5e9 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-title="'Radios'">
     <div class="ui vertical stripe segment">
       <h2 class="ui header">Browsing radios</h2>
       <router-link class="ui green basic button" to="/library/radios/build" exact>Create your own radio</router-link>
diff --git a/front/src/components/library/Track.vue b/front/src/components/library/Track.vue
index 0437ac88151ad166ea6704579b8069adf35007f2..e614635c9877ca315743d16cf0d4ebba47679597 100644
--- a/front/src/components/library/Track.vue
+++ b/front/src/components/library/Track.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div v-if="isLoadingTrack" class="ui vertical segment">
+    <div v-if="isLoadingTrack" class="ui vertical segment" v-title="'Track'">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
     <template v-if="track">
-      <div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
+      <div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="track.title">
         <div class="segment-content">
           <h2 class="ui center aligned icon header">
             <i class="circular inverted music orange icon"></i>
diff --git a/front/src/components/library/import/BatchDetail.vue b/front/src/components/library/import/BatchDetail.vue
index 0864d2464abf9a769e9c15d1d6d32b3ebf21f219..362a5acd17972e6b26bc3deca8ae5881b2865e79 100644
--- a/front/src/components/library/import/BatchDetail.vue
+++ b/front/src/components/library/import/BatchDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-title="'Import Batch #' + id">
     <div v-if="isLoading && !batch" class="ui vertical segment">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
diff --git a/front/src/components/library/import/BatchList.vue b/front/src/components/library/import/BatchList.vue
index de4fef554c5c4699ec1d501dbcbc471dc28d2379..857fef0457256aa7e7ea12f7d355bab1a36b32fe 100644
--- a/front/src/components/library/import/BatchList.vue
+++ b/front/src/components/library/import/BatchList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-title="'Import Batches'">
     <div class="ui vertical stripe segment">
       <div v-if="isLoading" :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
       <button
diff --git a/front/src/components/library/import/Main.vue b/front/src/components/library/import/Main.vue
index 66e16b71f467163cfb9313eaf5f6fa542cec4216..e2b6e484912d803a0494590afa04e6e8931401b8 100644
--- a/front/src/components/library/import/Main.vue
+++ b/front/src/components/library/import/Main.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-title="'Import Music'">
     <div class="ui vertical stripe segment">
       <div class="ui top three attached ordered steps">
         <a @click="currentStep = 0" :class="['step', {'active': currentStep === 0}, {'completed': currentStep > 0}]">
diff --git a/front/src/components/library/radios/Builder.vue b/front/src/components/library/radios/Builder.vue
index 8d67b61e18b5f21d67e360c3c4fe05def2e52fcc..9b8786cc6eb91181dcbb3e17a697f6b5a8edc881 100644
--- a/front/src/components/library/radios/Builder.vue
+++ b/front/src/components/library/radios/Builder.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui vertical stripe segment">
+  <div class="ui vertical stripe segment" v-title="'Radio Builder'">
     <div>
       <div>
         <h2 class="ui header">Builder</h2>
diff --git a/front/src/components/requests/RequestsList.vue b/front/src/components/requests/RequestsList.vue
index 33ba04f53c61a47e59fcd991185d3961ad12e693..5d4db243acce765d72e64c61e3771b54bf17e452 100644
--- a/front/src/components/requests/RequestsList.vue
+++ b/front/src/components/requests/RequestsList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-title="'Import Requests'">
     <div class="ui vertical stripe segment">
       <h2 class="ui header">Music requests</h2>
       <div :class="['ui', {'loading': isLoading}, 'form']">
diff --git a/front/src/main.js b/front/src/main.js
index f20af42bfa7ed7ab3850cc8ebf76d6e4ae0916e7..5030e5c9c429d62eda3d6c20e86acc1d4e19a3c2 100644
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -30,6 +30,10 @@ require('masonry-layout')
 Vue.use(VueMasonryPlugin)
 Vue.use(VueLazyload)
 Vue.config.productionTip = false
+Vue.directive('title', {
+  inserted: (el, binding) => { console.log(binding.value); document.title = binding.value + ' - Funkwhale' },
+  updated: (el, binding) => { document.title = binding.value + ' - Funkwhale' }
+})
 
 axios.defaults.baseURL = config.API_URL
 axios.interceptors.request.use(function (config) {
diff --git a/front/src/views/instance/Timeline.vue b/front/src/views/instance/Timeline.vue
index 8ffcd9758f63a6727999a8000659b6a36c99b651..f4ddedfb72e287235081cc8d86c5f5a388197c79 100644
--- a/front/src/views/instance/Timeline.vue
+++ b/front/src/views/instance/Timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Instance Timeline'">
     <div class="ui vertical center aligned stripe segment">
       <div v-if="isLoading" :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
         <div class="ui text loader">Loading timeline...</div>
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 6c3a988fd195ae3df5d4e597a69f4bb3dee9c40b..2769317e6440f24c034f21d5db68bbd7fd52524b 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div v-if="isLoading" class="ui vertical segment">
+    <div v-if="isLoading" class="ui vertical segment" v-title="'Playlist'">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
-    <div v-if="!isLoading && playlist" class="ui head vertical center aligned stripe segment">
+    <div v-if="!isLoading && playlist" class="ui head vertical center aligned stripe segment" v-title="playlist.name">
       <div class="segment-content">
         <h2 class="ui center aligned icon header">
           <i class="circular inverted list yellow icon"></i>
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index fc5dcbe54b441c4ee2009ba4ebe7881173ab108a..96aa36c4779bc11a6050208cf497ac861a7dabcd 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-title="'Playlists'">
     <div class="ui vertical stripe segment">
       <h2 class="ui header">Browsing playlists</h2>
       <div :class="['ui', {'loading': isLoading}, 'form']">