diff --git a/komga-webui/src/components/dialogs/TransientBookDetailsDialog.vue b/komga-webui/src/components/dialogs/TransientBookDetailsDialog.vue
index 99c01ef7e..68d444b73 100644
--- a/komga-webui/src/components/dialogs/TransientBookDetailsDialog.vue
+++ b/komga-webui/src/components/dialogs/TransientBookDetailsDialog.vue
@@ -39,7 +39,7 @@
               <tr>
                 <td class="font-weight-medium">{{ $t('dialog.transient_book_details.label_format') }}</td>
                 <td :class="rightBook ? 'diff' : ''">{{ getBookFormatFromMediaType(leftBook.mediaType).type }}</td>
-                <td v-if="rightBook">{{ getBookFormatFromMediaType(rightBook.media.mediaType).type }}</td>
+                <td v-if="rightBook">{{ getBookFormatFromMedia(rightBook.media).type }}</td>
               </tr>
 
               <tr>
@@ -69,7 +69,7 @@
 import Vue, {PropType} from 'vue'
 import {TransientBookDto} from '@/types/komga-transientbooks'
 import {BookDto, PageDto} from '@/types/komga-books'
-import {getBookFormatFromMedia} from '@/functions/book-format'
+import {getBookFormatFromMedia, getBookFormatFromMediaType} from '@/functions/book-format'
 import PagesTable from '@/components/PagesTable.vue'
 
 export default Vue.extend({
@@ -78,7 +78,8 @@ export default Vue.extend({
   data: () => {
     return {
       modal: false,
-      getBookFormatFromMediaType: getBookFormatFromMedia,
+      getBookFormatFromMediaType: getBookFormatFromMediaType,
+      getBookFormatFromMedia: getBookFormatFromMedia,
     }
   },
   props: {
diff --git a/komga-webui/src/functions/book-format.ts b/komga-webui/src/functions/book-format.ts
index 193ca42ae..ce289e379 100644
--- a/komga-webui/src/functions/book-format.ts
+++ b/komga-webui/src/functions/book-format.ts
@@ -19,6 +19,24 @@ export function getBookFormatFromMedia(media: MediaDto): BookFormat {
   }
 }
 
+export function getBookFormatFromMediaType(mediaType: string): BookFormat {
+  switch (mediaType) {
+    case 'application/x-rar-compressed':
+    case 'application/x-rar-compressed; version=4':
+      return {type: 'CBR', color: '#03A9F4'}
+    case 'application/zip':
+      return {type: 'CBZ', color: '#4CAF50'}
+    case 'application/pdf':
+      return {type: 'PDF', color: '#FF5722'}
+    case 'application/epub+zip':
+      return {type: 'EPUB', color: '#ff5ab1'}
+    case 'application/x-rar-compressed; version=5':
+      return {type: 'RAR5', color: '#000000'}
+    default:
+      return {type: mediaType, color: '#000000'}
+  }
+}
+
 export function getBookReadRouteFromMedia(media: MediaDto): string {
   switch (lowerCase(media.mediaProfile)) {
     case 'epub':