diff --git a/changes/changelog.d/359.feature b/changes/changelog.d/359.feature
new file mode 100644
index 0000000000000000000000000000000000000000..657788c917af76f5698d12dd639f997f33286a46
--- /dev/null
+++ b/changes/changelog.d/359.feature
@@ -0,0 +1 @@
+Change the document title to display current track information. (#359)
diff --git a/front/src/App.vue b/front/src/App.vue
index fd94a9f4605dc69d386d864f3663c5d928e8e4e8..5711466c5bb9cd29eaec058174a9fe7a4c5376b9 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -31,7 +31,7 @@
 import Vue from 'vue'
 import axios from 'axios'
 import _ from '@/lodash'
-import {mapState} from 'vuex'
+import {mapState, mapGetters} from 'vuex'
 import { WebSocketBridge } from 'django-channels'
 import GlobalEvents from '@/components/utils/global-events'
 import Sidebar from '@/components/Sidebar'
@@ -193,11 +193,35 @@ export default {
         console.log('Connected to WebSocket')
       })
     },
+    getTrackInformationText(track) {
+      const trackTitle = track.title
+      const artistName = (
+        (track.artist) ? track.artist.name : track.album.artist.name)
+      const text = `♫ ${trackTitle} – ${artistName} ♫`
+      return text
+    },
+    updateDocumentTitle() {
+      let parts = []
+      const currentTrackPart = (
+        (this.currentTrack) ? this.getTrackInformationText(this.currentTrack)
+        : null)
+      if (currentTrackPart) {
+        parts.push(currentTrackPart)
+      }
+      if (this.$store.state.ui.pageTitle) {
+        parts.push(this.$store.state.ui.pageTitle)
+      }
+      parts.push(this.$store.state.instance.settings.instance.name.value || 'Funkwhale')
+      document.title = parts.join(' – ')
+    },
   },
   computed: {
     ...mapState({
       messages: state => state.ui.messages
     }),
+    ...mapGetters({
+      currentTrack: 'queue/currentTrack'
+    }),
     suggestedInstances () {
       let instances = this.$store.state.instance.knownInstances.slice(0)
       if (this.$store.state.instance.frontSettings.defaultServerUrl) {
@@ -262,7 +286,19 @@ export default {
           })
         })
       }
-    }
+    },
+    'currentTrack': {
+      immediate: true,
+      handler(newValue) {
+        this.updateDocumentTitle()
+      },
+    },
+    '$store.state.ui.pageTitle': {
+      immediate: true,
+      handler(newValue) {
+        this.updateDocumentTitle()
+      },
+    },
   }
 }
 </script>
diff --git a/front/src/main.js b/front/src/main.js
index 9f058d8ecbef6491660647a67e815d0b5beb8f62..31aa07d03193354d3bd04daf960023b69c651307 100644
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -58,16 +58,8 @@ Vue.use(VueMasonryPlugin)
 Vue.use(VueLazyload)
 Vue.config.productionTip = false
 Vue.directive('title', function (el, binding) {
-  let parts = []
-  let instanceName = store.state.instance.settings.instance.name.value
-  if (instanceName.length === 0) {
-    instanceName = 'Funkwhale'
-  }
-  parts.unshift(instanceName)
-  parts.unshift(binding.value)
-  document.title = parts.join(' - ')
-  }
-)
+  store.commit('ui/pageTitle', binding.value)
+})
 axios.interceptors.request.use(function (config) {
   // Do something before request is sent
   if (store.state.auth.token) {
diff --git a/front/src/store/ui.js b/front/src/store/ui.js
index cec9ef9c568b39459495bc73c4c23eb46c449500..8a8bc1da01854a6b630c5a3877bca91217feb524 100644
--- a/front/src/store/ui.js
+++ b/front/src/store/ui.js
@@ -19,7 +19,8 @@ export default {
       'import.status_updated': {},
       'mutation.created': {},
       'mutation.updated': {},
-    }
+    },
+    pageTitle: null
   },
   mutations: {
     addWebsocketEventHandler: (state, {eventName, id, handler}) => {
@@ -53,6 +54,9 @@ export default {
       } else {
         state.notifications[type] = Math.max(0, state.notifications[type] + count)
       }
+    },
+    pageTitle: (state, value) => {
+      state.pageTitle = value
     }
   },
   actions: {