diff --git a/l10n/messages.pot b/l10n/messages.pot
index 38f668f2..cc3b9dbc 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -90,7 +90,7 @@ msgstr ""
 msgid "Undo"
 msgstr ""
 
-#: lib/components/FilePicker/FileListRow.vue:22
+#: lib/components/FilePicker/FileListRow.vue:23
 msgid "Unset"
 msgstr ""
 
diff --git a/lib/components/FilePicker/FileListRow.vue b/lib/components/FilePicker/FileListRow.vue
index b0c1c8a0..e55ebca2 100644
--- a/lib/components/FilePicker/FileListRow.vue
+++ b/lib/components/FilePicker/FileListRow.vue
@@ -12,6 +12,7 @@
 			<div class="file-picker__name-container">
 				<div class="file-picker__file-icon" :style="{ backgroundImage }" />
 				<div class="file-picker__file-name" :title="displayName" v-text="displayName" />
+				<div class="file-picker__file-extension" v-text="fileExtension" />
 			</div>
 		</td>
 		<td class="row-size">
@@ -50,9 +51,14 @@ const emit = defineEmits<{
 }>()
 
 /**
- * The displayname of the current node
+ * The displayname of the current node (excluding file extension)
  */
-const displayName = computed(() => props.node.attributes?.displayname || props.node.basename)
+const displayName = computed(() => props.node.attributes?.displayName || props.node.basename.slice(0, props.node.extension ? -props.node.extension.length : undefined))
+
+/**
+ * The file extension of the file
+ */
+const fileExtension = computed(() => props.node.extension)
 
 /**
  * If this node can be picked, basically just check if picking a directory is allowed
@@ -119,5 +125,10 @@ function handleKeyDown(event: KeyboardEvent) {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	&__file-extension {
+		color: var(--color-text-maxcontrast);
+		min-width: fit-content;
+	}
 }
 </style>