diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
index 8c6254dd9..14206b70a 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
@@ -52,7 +52,11 @@
                         </template>
 
                         <template #item="{ item }">
-                            <SpoolmanChangeSpoolDialogRow :key="item.id" :spool="item" @set-spool="setSpool" />
+                            <SpoolmanChangeSpoolDialogRow
+                                :key="item.id"
+                                :spool="item"
+                                :max_id_digits="max_spool_id_digits"
+                                @set-spool="setSpool" />
                         </template>
                     </v-data-table>
                 </v-card-text>
@@ -87,6 +91,15 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
         return this.$store.state.server.spoolman.spools ?? []
     }
 
+    get max_spool_id_digits(): number {
+        const max_id = this.$store.state.server.spoolman.spools.reduce(
+            (x: number, s: ServerSpoolmanStateSpool) => Math.max(x, s.id),
+            0
+        )
+
+        return max_id.toString().length
+    }
+
     get headers() {
         return [
             {
diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
index c02fb14ff..bd6a68631 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
@@ -3,8 +3,16 @@
         <td style="width: 50px" class="pr-0 py-2">
             <spool-icon :color="color" style="width: 50px; float: left" class="mr-3" />
         </td>
+
         <td class="py-2" style="min-width: 300px">
-            <strong class="text-no-wrap">{{ vendor }} - {{ name }}</strong>
+            <v-list-item two-line>
+                <v-list-item-content class="no--padding">
+                    <div class="text--disabled mb-1">#{{ id }} | {{ vendor }}</div>
+                    <v-list-item-title class="mb-1">
+                        <span class="text--filament">{{ name }}</span>
+                    </v-list-item-title>
+                </v-list-item-content>
+            </v-list-item>
             <template v-if="location">
                 <br />
                 {{ $t('Panels.SpoolmanPanel.Location') }}: {{ location }}
@@ -31,12 +39,25 @@ import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
 @Component({})
 export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
     @Prop({ required: true }) declare readonly spool: ServerSpoolmanStateSpool
+    @Prop({ required: false }) declare readonly max_id_digits: number
+
     get color() {
         const color = this.spool.filament?.color_hex ?? '000'
 
         return `#${color}`
     }
 
+    get id() {
+        // add leading zeros depending on max_id digit count
+        let id: string = this.spool.id.toString()
+
+        while (id.length < this.max_id_digits) {
+            id = '0' + id
+        }
+
+        return id
+    }
+
     get vendor() {
         return this.spool.filament?.vendor?.name ?? 'Unknown'
     }
@@ -102,3 +123,12 @@ export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
     }
 }
 </script>
+<style scoped>
+.text--filament {
+    font-size: 1.1rem;
+}
+
+.no--padding {
+    padding: 0;
+}
+</style>