diff --git a/marietje/marietje/templates/marietje/base.html b/marietje/marietje/templates/marietje/base.html
index d7bc93c..f6ab1e3 100644
--- a/marietje/marietje/templates/marietje/base.html
+++ b/marietje/marietje/templates/marietje/base.html
@@ -15,7 +15,10 @@
         <link href="{% static 'fontawesomefree/css/all.min.css' %}" rel="stylesheet" type="text/css">
 
         <!-- Vue JS -->
-        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+         <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+        <script>
+            const { createApp } = Vue;
+        </script>
 
         <!-- TaTa.js notifications -->
         <script src="{% static 'marietje/js/tata.js' %}"></script>
@@ -26,6 +29,7 @@
     <body>
         <nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-primary">
             <div class="container">
+                <a class="navbar-brand d-block d-lg-none" href="{% url "index" %}">Marietje 4.1</a>
                 <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas"
                         data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                     <span class="navbar-toggler-icon"></span>
diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index be7c2ad..0a3d57d 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -74,22 +74,22 @@
                         <tbody class="queuebody">
                         <template v-for="(song, index) in queue">
                             <tr :class="{ marietjequeue: (song.user === null), currentsong: (index === 0), 'fw-bold': (index === 0) }">
-                                <td class="artist"><% song.song.artist %></td>
-                                <td class="title"><% song.song.title %></td>
+                                <td class="artist">${song.song.artist }$</td>
+                                <td class="title">${song.song.title }$</td>
                                 <td class="d-sm-table-cell d-none requested-by">
                                     <template v-if="song.user === null">
                                         Marietje
                                     </template>
                                     <template v-else>
-                                        <% song.user.name %>
+                                        ${song.user.name }$
                                     </template>
                                 </td>
                                 <td class="d-sm-table-cell d-none plays-at" style="text-align: right">
                                     <template v-if="song.time_until_song_seconds !== null && song.time_until_song_seconds > 0 && playsIn === true">
-                                        <% song.time_until_song_seconds.secondsToMMSS() %>
+                                        ${song.time_until_song_seconds.secondsToMMSS() }$
                                     </template>
                                     <template v-else-if="playsIn === false && song.plays_at !== null && song.played === false">
-                                        <% song.plays_at.timestampToHHMMSS() %>
+                                        ${song.plays_at.timestampToHHMMSS() }$
                                     </template>
                                 </td>
                                 <td>
@@ -160,7 +160,7 @@
                                 </select>
                                 <select class="pagenum input-mini" title="Select page number" v-model="page_number">
                                     <template v-for="(i, index) in number_of_pages">
-                                        <option :value="i"><% i %></option>
+                                        <option :value="i">${i }$</option>
                                     </template>
                                 </select>
                             </th>
@@ -171,21 +171,21 @@
                         <template v-for="(song, index) in songs">
                             <tr>
                                 <td>
-                                    <% song.artist %>
+                                    ${song.artist }$
                                 </td>
                                 <td>
-                                    <a href="#" v-on:click="request_song(song.id);"><% song.title %></a>
+                                    <a href="#" v-on:click="request_song(song.id);">${song.title }$</a>
                                 </td>
                                 <td>
                                     <template v-if="song.user === null">
                                         Marietje
                                     </template>
                                     <template v-else>
-                                        <% song.user.name %>
+                                        ${song.user.name }$
                                     </template>
                                 </td>
                                 <td>
-                                    <% song.duration.secondsToMMSS() %>
+                                    ${song.duration.secondsToMMSS() }$
                                 </td>
                                 <td>
                                     <a href="#" v-on:click="report_song(song.id);">
@@ -209,18 +209,19 @@
         const CAN_MOVE = {{ perms.queues.can_move|yesno:"1,0" }};
     </script>
     <script>
-        const queue_vue = new Vue({
-            el: '#queue-container',
-            delimiters: ['<%', '%>'],
-            data: {
-                current_song: null,
-                queue: [],
-                user_data: null,
-                refreshing: true,
-                refreshTimer: null,
-                clockInterval: null,
-                started_at: null,
-                playsIn: true,
+        const queue_vue = createApp({
+            delimiters: ['${', '}$'],
+            data() {
+                return {
+                    current_song: null,
+                    queue: [],
+                    user_data: null,
+                    refreshing: true,
+                    refreshTimer: null,
+                    clockInterval: null,
+                    started_at: null,
+                    playsIn: true,
+                }
             },
             mounted() {
                 this.clockInterval = setInterval(this.update_song_times, 1000);
@@ -372,19 +373,20 @@
                     });
                 }
             }
-        });
+        }).mount('#queue-container');
     </script>
     <script>
-        const request_vue = new Vue({
-            el: '#request-container',
-            delimiters: ['<%', '%>'],
-            data: {
-                songs: [],
-                total_songs: 0,
-                search_input: "",
-                typing_timer: null,
-                page_size: 10,
-                page_number: 1,
+        const request_vue = createApp({
+            delimiters: ['${', '}$'],
+            data() {
+                return {
+                    songs: [],
+                    total_songs: 0,
+                    search_input: "",
+                    typing_timer: null,
+                    page_size: 10,
+                    page_number: 1,
+                }
             },
             watch: {
                 search_input: {
@@ -542,7 +544,7 @@
                     this.page_number = page_number;
                 }
             }
-        });
+        }).mount('#request-container');
     </script>
     <script>
         function volume_down() {
diff --git a/marietje/songs/api/v1/views.py b/marietje/songs/api/v1/views.py
index 54e3676..386304e 100644
--- a/marietje/songs/api/v1/views.py
+++ b/marietje/songs/api/v1/views.py
@@ -84,7 +84,7 @@ class SongUploadAPIView(APIView):
             song = upload_file(file, artist, title, request.user)
             upload_counter.inc()
             return Response(status=200, data=self.serializer_class(song).data)
-        except UploadException:
+        except (UploadException, ConnectionRefusedError):
             return Response(
                 status=500,
                 data={
diff --git a/marietje/songs/templates/songs/manage.html b/marietje/songs/templates/songs/manage.html
index 253a271..b761b9b 100644
--- a/marietje/songs/templates/songs/manage.html
+++ b/marietje/songs/templates/songs/manage.html
@@ -41,7 +41,7 @@
                             </select>
                             <select class="pagenum input-mini" title="Select page number" v-model="page_number">
                                 <template v-for="(i, index) in number_of_pages">
-                                    <option :value="i"><% i %></option>
+                                    <option :value="i">${ i }$</option>
                                 </template>
                             </select>
                         </th>
@@ -52,10 +52,10 @@
                     <template v-for="(song, index) in songs">
                         <tr>
                             <td>
-                                <% song.artist %>
+                                ${ song.artist }$
                             </td>
                             <td>
-                                <a :href="'/songs/edit/' + song.id + '/'" v-on:click="request_song(song.id);"><% song.title %></a>
+                                <a :href="'/songs/edit/' + song.id + '/'" v-on:click="request_song(song.id);">${ song.title }$</a>
                             </td>
                         </tr>
                     </template>
@@ -64,16 +64,17 @@
         </div>
     </div>
     <script>
-        let manage_vue = new Vue({
-            el: '#request-table',
-            delimiters: ['<%', '%>'],
-            data: {
-                songs: [],
-                total_songs: 0,
-                search_input: "",
-                typing_timer: null,
-                page_size: 10,
-                page_number: 1,
+        let manage_vue = createApp({
+            delimiters: ['${', '}$'],
+            data() {
+                return {
+                    songs: [],
+                    total_songs: 0,
+                    search_input: "",
+                    typing_timer: null,
+                    page_size: 10,
+                    page_number: 1,
+                }
             },
             watch: {
                 search_input: {
@@ -168,6 +169,6 @@
                     this.page_number = page_number;
                 }
             }
-        });
+        }).mount('#request-table');
     </script>
 {% endblock %}
diff --git a/marietje/songs/templates/songs/upload.html b/marietje/songs/templates/songs/upload.html
index 7fb1447..79b8c09 100644
--- a/marietje/songs/templates/songs/upload.html
+++ b/marietje/songs/templates/songs/upload.html
@@ -16,9 +16,12 @@
                             {% csrf_token %}
                             <div class="fileupload fileupload-new" data-provides="fileupload">
                                 <span class="btn btn-primary btn-file">
-                                    <span v-if="fileObjects.length === 0">
+                                    <span v-if="fileObjects.length === 0 && !files_loading">
                                         Select files
                                     </span>
+                                    <span v-else-if="files_loading">
+                                        Loading new files...
+                                    </span>
                                     <span v-else>
                                         Change
                                     </span>
@@ -29,7 +32,7 @@
                             <div class="songs">
                                 <div v-for="fileObject in fileObjects" class="song-container card mb-3">
                                     <div class="card-header">
-                                        <h3><% fileObject.name %></h3>
+                                        <h3>${ fileObject.name }$</h3>
                                     </div>
                                     <div class="card-body">
                                         <div class="form-group mb-3">
@@ -48,7 +51,7 @@
                                         </div>
                                         <template v-if="fileObject.upload_finished === true">
                                             <div v-if="fileObject.success === true" class="alert alert-success">Upload finished successfully.</div>
-                                            <div v-else class="alert alert-danger"><% fileObject.error_message %></div>
+                                            <div v-else class="alert alert-danger">${ fileObject.error_message }$</div>
                                         </template>
                                     </div>
                                 </div>
@@ -73,17 +76,18 @@
         </div>
     </div>
     <link rel="stylesheet" href="{% static 'songs/css/upload.css' %}"/>
-    <script type="module">
-        import * as id3 from '//unpkg.com/id3js@^2/lib/id3.js';
-
-        let upload_vue = new Vue({
-            el: '#uploadform',
-            delimiters: ['<%', '%>'],
-            data: {
-                files: [],
-                fileObjects: [],
-                uploaded: false,
-                upload_in_progress: false,
+    <script src="https://cdn.jsdelivr.net/npm/mp3tag.js@latest/dist/mp3tag.min.js"></script>
+    <script>
+        let upload_vue = createApp({
+            delimiters: ['${', '}$'],
+            data() {
+                return {
+                    files: [],
+                    fileObjects: [],
+                    uploaded: false,
+                    upload_in_progress: false,
+                    files_loading: false,
+                }
             },
             computed: {
                 ready_for_upload: function() {
@@ -158,14 +162,20 @@
                         }).then(() => {
                             this.fileObjects[i].success = true;
                         }).catch(e => {
+                            console.log(e);
                             if (e instanceof Response) {
-                                e.json().then(data => {
-                                    this.fileObjects.error_message = data.errorMessage;
-                                    this.fileObjects.success = false;
-                                });
+                                try {
+                                    e.json().then(data => {
+                                        this.fileObjects[i].error_message = data.errorMessage;
+                                        this.fileObjects[i].success = false;
+                                    });
+                                } catch {
+                                    this.fileObjects[i].error_message = "An exception occurred while uploading this file, please try again.";
+                                    this.fileObjects[i].success = false;
+                                }
                             } else {
-                                this.fileObjects.error_message = "An exception occurred while uploading this file, please try again.";
-                                this.fileObjects.success = false;
+                                this.fileObjects[i].error_message = "An exception occurred while uploading this file, please try again.";
+                                this.fileObjects[i].success = false;
                             }
                         }).finally(() => {
                             this.fileObjects[i].upload_finished = true;
@@ -177,23 +187,25 @@
                     });
                 },
                 async set_new_files(event) {
+                    this.files_loading = true;
+                    this.uploaded = false;
+                    this.upload_in_progress = false;
                     this.files = event.target.files;
                     let newFileObjects = [];
                     for (let i = 0; i < this.files.length; i++) {
-                        try {
-                            const tags = await this.parseSong(this.files[i]);
+                        await this.parseSong(this.files[i]).then((song) => {
                             newFileObjects.push(
                                 {
                                     "file": this.files[i],
                                     "name": this.files[i].name,
-                                    "artist": tags.artist,
-                                    "title": tags.title,
+                                    "artist": song.artist,
+                                    "title": song.title,
                                     "success": null,
                                     "error_message": null,
                                     "upload_finished": false,
                                 }
                             );
-                        } catch {
+                        }).catch(() => {
                             newFileObjects.push(
                                 {
                                     "file": this.files[i],
@@ -205,14 +217,28 @@
                                     "upload_finished": false,
                                 }
                             )
-                        }
+                        });
                     }
                     this.fileObjects = newFileObjects;
+                    this.files_loading = false;
                 },
-                parseSong(file) {
-                    return id3.fromFile(file);
+                async parseSong(file) {
+                    const buffer = await new Promise((resolve) => {
+                        let fileReader = new FileReader();
+                        fileReader.onload = (e) => resolve(fileReader.result);
+                        fileReader.readAsArrayBuffer(file);
+                    });
+
+                    const mp3tag = new MP3Tag(buffer);
+                    mp3tag.read()
+
+                    if (mp3tag.error !== '') {
+                        throw new Error(mp3tag.error);
+                    } else {
+                        return mp3tag.tags;
+                    }
                 }
             }
-        });
+        }).mount('#uploadform');
     </script>
 {% endblock %}
