diff --git a/komga-webui/src/types/author-roles.ts b/komga-webui/src/types/author-roles.ts
index 6caa0eb9c..e7c9a1c3c 100644
--- a/komga-webui/src/types/author-roles.ts
+++ b/komga-webui/src/types/author-roles.ts
@@ -7,3 +7,8 @@ export const authorRoles = [
   'cover',
   'editor',
 ]
+
+export const authorRolesSeries = [
+  'writer',
+  'penciller',
+]
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index cf0a8e77e..8733cdd3d 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -281,7 +281,7 @@
       </v-row>
 
       <v-divider v-if="series.booksMetadata.authors.length > 0"/>
-      <div v-for="role in authorRoles"
+      <div v-for="role in authorRolesSeries"
            :key="role">
         <v-row class="align-center text-caption"
                v-if="authorsByRole[role]"
@@ -301,7 +301,7 @@
                 </v-btn>
               </template>
 
-              <v-chip v-for="(name, i) in authorsByRole[role]"
+              <v-chip v-for="(name, i) in authorsByRole[role].sort()"
                       :key="i"
                       :class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
                       :title="name"
@@ -385,7 +385,7 @@ import FilterPanels from '@/components/FilterPanels.vue'
 import {SeriesDto} from "@/types/komga-series";
 import {groupAuthorsByRole} from "@/functions/authors";
 import ReadMore from "@/components/ReadMore.vue";
-import {authorRoles} from "@/types/author-roles";
+import {authorRoles, authorRolesSeries} from "@/types/author-roles";
 import VueHorizontal from "vue-horizontal";
 
 const tags = require('language-tags')
@@ -412,7 +412,7 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      authorRoles,
+      authorRolesSeries,
       series: {} as SeriesDto,
       books: [] as BookDto[],
       selectedBooks: [] as BookDto[],