diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index 113a5bdd8..6956a41fe 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -15,7 +15,7 @@
 <template>
     <div>
         <panel
-            :title="$t('Timelapse.TimelapseFiles')"
+            :title="$t('Timelapse.TimelapseFiles').toString()"
             :icon="mdiFileDocumentMultipleOutline"
             card-class="timelapse-files-panel">
             <v-card-text>
@@ -169,38 +169,40 @@
         <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
             <v-list>
                 <v-list-item v-if="!contextMenu.item.isDirectory" @click="downloadFile(contextMenu.item.filename)">
-                    <v-icon left>{{ mdiCloudDownload }}</v-icon>
+                    <v-icon class="mr-1">{{ mdiCloudDownload }}</v-icon>
                     {{ $t('Timelapse.Download') }}
                 </v-list-item>
                 <v-list-item
                     v-if="contextMenu.item.isDirectory && contextMenu.item.permissions.includes('w')"
                     @click="renameDirectory(contextMenu.item)">
-                    <v-icon left>{{ mdiRenameBox }}</v-icon>
+                    <v-icon class="mr-1">{{ mdiRenameBox }}</v-icon>
                     {{ $t('Timelapse.Rename') }}
                 </v-list-item>
                 <v-list-item
                     v-if="!contextMenu.item.isDirectory && contextMenu.item.permissions.includes('w')"
                     @click="renameFile(contextMenu.item)">
-                    <v-icon left>{{ mdiRenameBox }}</v-icon>
+                    <v-icon class="mr-1">{{ mdiRenameBox }}</v-icon>
                     {{ $t('Timelapse.Rename') }}
                 </v-list-item>
                 <v-list-item
                     v-if="!contextMenu.item.isDirectory && contextMenu.item.permissions.includes('w')"
+                    class="red--text"
                     @click="removeFile">
-                    <v-icon left>{{ mdiDelete }}</v-icon>
+                    <v-icon class="mr-1" color="error">{{ mdiDelete }}</v-icon>
                     {{ $t('Timelapse.Delete') }}
                 </v-list-item>
                 <v-list-item
                     v-if="contextMenu.item.isDirectory && contextMenu.item.permissions.includes('w')"
+                    class="red--text"
                     @click="deleteDirectory(contextMenu.item)">
-                    <v-icon left>{{ mdiDelete }}</v-icon>
+                    <v-icon class="mr-1" color="error">{{ mdiDelete }}</v-icon>
                     {{ $t('Timelapse.Delete') }}
                 </v-list-item>
             </v-list>
         </v-menu>
         <v-dialog v-model="dialogRenameFile.show" max-width="400">
             <panel
-                :title="$t('Timelapse.RenameFile')"
+                :title="$t('Timelapse.RenameFile').toString()"
                 card-class="gcode-files-rename-file-dialog"
                 :margin-bottom="false">
                 <template #buttons>
@@ -225,7 +227,7 @@
         </v-dialog>
         <v-dialog v-model="dialogCreateDirectory.show" max-width="400">
             <panel
-                :title="$t('Timelapse.NewDirectory')"
+                :title="$t('Timelapse.NewDirectory').toString()"
                 card-class="gcode-files-new-directory-dialog"
                 :margin-bottom="false">
                 <template #buttons>
@@ -253,7 +255,7 @@
         </v-dialog>
         <v-dialog v-model="dialogRenameDirectory.show" max-width="400">
             <panel
-                :title="$t('Timelapse.RenameDirectory')"
+                :title="$t('Timelapse.RenameDirectory').toString()"
                 card-class="gcode-files-rename-directory-dialog"
                 :margin-bottom="false">
                 <template #buttons>
@@ -280,7 +282,7 @@
         </v-dialog>
         <v-dialog v-model="dialogDeleteDirectory.show" max-width="400">
             <panel
-                :title="$t('Timelapse.DeleteDirectory')"
+                :title="$t('Timelapse.DeleteDirectory').toString()"
                 card-class="gcode-files-delete-directory-dialog"
                 :margin-bottom="false">
                 <template #buttons>
@@ -304,7 +306,7 @@
         </v-dialog>
         <v-dialog v-model="boolVideoDialog" :max-width="700">
             <panel
-                :title="$t('Timelapse.Video')"
+                :title="$t('Timelapse.Video').toString()"
                 :icon="mdiFileVideo"
                 card-class="timelapse-video-dialog"
                 :margin-bottom="false">
@@ -590,7 +592,7 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
     }
 
     clickRowGoBack() {
-        this.currentPath = this.currentPath.substr(0, this.currentPath.lastIndexOf('/'))
+        this.currentPath = this.currentPath.slice(0, this.currentPath.lastIndexOf('/'))
     }
 
     showContextMenu(e: any, item: FileStateFile) {
@@ -608,7 +610,7 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
 
     existsFramesZip(item: FileStateFile) {
         const posLastPoint = item.filename.lastIndexOf('.')
-        const zipFilename = item.filename.substr(0, posLastPoint) + '.zip'
+        const zipFilename = item.filename.slice(0, posLastPoint) + '.zip'
 
         return this.files.findIndex((file) => file.filename === zipFilename) !== -1
     }
@@ -622,7 +624,7 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
 
     renameFile(item: FileStateFile) {
         const posLastPoint = item.filename.lastIndexOf('.')
-        this.dialogRenameFile.newName = item.filename.substr(0, posLastPoint)
+        this.dialogRenameFile.newName = item.filename.slice(0, posLastPoint)
 
         this.dialogRenameFile.item = item
         this.dialogRenameFile.show = true
@@ -634,23 +636,35 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
 
     renameFileAction() {
         const posLastPoint = this.dialogRenameFile.item.filename.lastIndexOf('.')
-        const oldNameWithoutExtension = this.dialogRenameFile.item.filename.substr(0, posLastPoint)
+        const oldNameWithoutExtension = this.dialogRenameFile.item.filename.slice(0, posLastPoint)
+        const fileExtension = this.dialogRenameFile.item.filename.split('.').pop()
 
         this.dialogRenameFile.show = false
+
+        /**
+         * rename the file regardless of its file-extension
+         */
         this.$socket.emit(
             'server.files.move',
             {
-                source: this.currentPath + '/' + this.dialogRenameFile.item.filename,
-                dest: this.currentPath + '/' + this.dialogRenameFile.newName + '.mp4',
+                source: `${this.currentPath}/${this.dialogRenameFile.item.filename}`,
+                dest: `${this.currentPath}/${this.dialogRenameFile.newName}.${fileExtension}`,
             },
             { action: 'files/getMove' }
         )
 
-        const fileJpg = this.files.find((file) => file.filename === oldNameWithoutExtension + '.jpg')
+        if (fileExtension !== 'mp4') return
+
+        /**
+         * mp4 and jpg always require to have the same name as the
+         * jpg is used as a mp4-thumbnail in the timelapse file-browser
+         */
+        const fileJpg = this.files.find((file) => file.filename === `${oldNameWithoutExtension}.jpg`)
+
         if (fileJpg) {
             this.$socket.emit('server.files.move', {
-                source: this.currentPath + '/' + oldNameWithoutExtension + '.jpg',
-                dest: this.currentPath + '/' + this.dialogRenameFile.newName + '.jpg',
+                source: `${this.currentPath}/${oldNameWithoutExtension}.jpg`,
+                dest: `${this.currentPath}/${this.dialogRenameFile.newName}.jpg`,
             })
         }
     }
@@ -679,6 +693,22 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
 
     removeFile() {
         const filename = this.contextMenu.item.filename.slice(0, this.contextMenu.item.filename.lastIndexOf('.'))
+        const fileExtension = this.contextMenu.item.filename.split('.').pop()
+
+        /**
+         * delete the file regardless of its file-extension
+         */
+        this.$socket.emit(
+            'server.files.delete_file',
+            { path: this.currentPath + '/' + this.contextMenu.item.filename },
+            { action: 'files/getDeleteFile' }
+        )
+
+        if (fileExtension !== 'mp4') return
+
+        /**
+         * if file-extension is mp4, also delete its corresponding thumbnail jpg
+         */
         const previewFilename = filename + '.jpg'
         const previewExists = this.files.findIndex((file) => file.filename === previewFilename) !== -1
 
@@ -688,11 +718,6 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
                 { path: this.currentPath + '/' + previewFilename },
                 { action: 'files/getDeleteFile' }
             )
-        this.$socket.emit(
-            'server.files.delete_file',
-            { path: this.currentPath + '/' + this.contextMenu.item.filename },
-            { action: 'files/getDeleteFile' }
-        )
     }
 
     deleteDirectory(item: FileStateFile) {