diff --git a/src/components/dialogs/JobqueueEntryChangeCountDialog.vue b/src/components/dialogs/JobqueueEntryChangeCountDialog.vue
new file mode 100644
index 000000000..0cd1d88c6
--- /dev/null
+++ b/src/components/dialogs/JobqueueEntryChangeCountDialog.vue
@@ -0,0 +1,88 @@
+<template>
+    <v-dialog :value="show" max-width="400">
+        <panel
+            :title="$t('JobQueue.ChangeCount')"
+            :icon="mdiCounter"
+            card-class="jobqueue-change-count-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+
+            <v-card-text>
+                <v-text-field
+                    ref="inputFieldAddToQueueCount"
+                    v-model="count"
+                    :label="$t('JobQueue.Count')"
+                    required
+                    :rules="countInputRules"
+                    hide-spin-buttons
+                    type="number"
+                    @keyup.enter="update">
+                    <template #append-outer>
+                        <div class="_spin_button_group">
+                            <v-btn class="mt-n3" icon plain small @click="count++">
+                                <v-icon>{{ mdiChevronUp }}</v-icon>
+                            </v-btn>
+                            <v-btn :disabled="count <= 1" class="mb-n3" icon plain small @click="count--">
+                                <v-icon>{{ mdiChevronDown }}</v-icon>
+                            </v-btn>
+                        </div>
+                    </template>
+                </v-text-field>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn color="" text @click="closeDialog">{{ $t('JobQueue.Cancel') }}</v-btn>
+                <v-btn color="primary" text @click="update">{{ $t('JobQueue.ChangeCount') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiCloseThick, mdiChevronUp, mdiChevronDown, mdiCounter } from '@mdi/js'
+import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
+
+@Component({
+    components: { Panel },
+})
+export default class JobqueueEntryChangeCountDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiChevronUp = mdiChevronUp
+    mdiChevronDown = mdiChevronDown
+    mdiCounter = mdiCounter
+
+    @Prop({ type: Boolean, required: true }) show!: boolean
+    @Prop({ type: Object, required: true }) job!: ServerJobQueueStateJob
+
+    count = 1
+
+    countInputRules = [
+        (value: string) => !!value || this.$t('JobQueue.InvalidCountEmpty'),
+        (value: string) => parseInt(value) > 0 || this.$t('JobQueue.InvalidCountGreaterZero'),
+    ]
+
+    update() {
+        this.$store.dispatch('server/jobQueue/changeCount', {
+            job_id: this.job.job_id,
+            count: this.count,
+        })
+
+        this.closeDialog()
+    }
+
+    closeDialog() {
+        this.$emit('close')
+    }
+
+    @Watch('show')
+    showChanged(show: boolean) {
+        if (show) this.count = (this.job.combinedIds?.length ?? 0) + 1
+    }
+}
+</script>
diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index b7391e121..8ab308c38 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -1,63 +1,53 @@
 <template>
-    <div>
-        <panel
-            ref="jobqueuePanel"
-            :icon="mdiTrayFull"
-            :title="$t('JobQueue.JobQueue').toString()"
-            card-class="jobqueue-panel">
-            <template #buttons>
-                <v-btn
-                    v-if="queueState === 'paused'"
-                    color="success"
-                    :loading="loadings.includes('startJobqueue')"
-                    icon
-                    tile
-                    :disabled="!klipperReadyForGui"
-                    @click="startJobqueue">
-                    <v-tooltip top>
-                        <template #activator="{ on, attrs }">
-                            <v-icon v-bind="attrs" v-on="on">{{ mdiPlay }}</v-icon>
-                        </template>
-                        <span>{{ $t('JobQueue.Start') }}</span>
-                    </v-tooltip>
-                </v-btn>
-                <v-btn
-                    v-if="['ready', 'loading'].includes(queueState)"
-                    color="warning"
-                    :loading="loadings.includes('pauseJobqueue')"
-                    icon
-                    tile
-                    @click="pauseJobqueue">
-                    <v-tooltip top>
-                        <template #activator="{ on, attrs }">
-                            <v-icon v-bind="attrs" v-on="on">{{ mdiPause }}</v-icon>
-                        </template>
-                        <span>{{ $t('JobQueue.Pause') }}</span>
-                    </v-tooltip>
-                </v-btn>
-            </template>
-            <v-data-table
-                :items="jobs"
-                class="jobqueue-table"
-                sort-by="time_added"
-                :items-per-page.sync="countPerPage"
-                :footer-props="{
-                    itemsPerPageText: $t('JobQueue.Jobs'),
-                    itemsPerPageAllText: $t('JobQueue.AllJobs'),
-                    itemsPerPageOptions: [10, 25, 50, 100, -1],
-                }"
-                mobile-breakpoint="0">
-                <template #no-data>
-                    <div class="text-center">{{ $t('JobQueue.Empty') }}</div>
-                </template>
-
-                <template #item="{ item }">
-                    <jobqueue-entry :key="item.job_id" :item="item" :content-td-width="contentTdWidth" />
-                </template>
-            </v-data-table>
-            <resize-observer @notify="handleResize" />
-        </panel>
-    </div>
+    <panel :icon="mdiTrayFull" :title="$t('JobQueue.JobQueue')" card-class="jobqueue-panel">
+        <template #buttons>
+            <v-btn
+                v-if="queueState === 'paused'"
+                color="success"
+                :loading="loadings.includes('startJobqueue')"
+                icon
+                tile
+                :disabled="!klipperReadyForGui"
+                @click="startJobqueue">
+                <v-tooltip top>
+                    <template #activator="{ on, attrs }">
+                        <v-icon v-bind="attrs" v-on="on">{{ mdiPlay }}</v-icon>
+                    </template>
+                    <span>{{ $t('JobQueue.Start') }}</span>
+                </v-tooltip>
+            </v-btn>
+            <v-btn
+                v-if="['ready', 'loading'].includes(queueState)"
+                color="warning"
+                :loading="loadings.includes('pauseJobqueue')"
+                icon
+                tile
+                @click="pauseJobqueue">
+                <v-tooltip top>
+                    <template #activator="{ on, attrs }">
+                        <v-icon v-bind="attrs" v-on="on">{{ mdiPause }}</v-icon>
+                    </template>
+                    <span>{{ $t('JobQueue.Pause') }}</span>
+                </v-tooltip>
+            </v-btn>
+        </template>
+        <v-row v-if="jobs.length" class="mx-0 mt-0">
+            <v-col>
+                <draggable
+                    v-model="joblist"
+                    handle=".handle"
+                    class="jobqueue-list"
+                    ghost-class="ghost"
+                    group="jobs"
+                    @end="updateOrder">
+                    <jobqueue-entry v-for="job in jobs" :key="job.job_id" :job="job" :show-handle="true" />
+                </draggable>
+            </v-col>
+        </v-row>
+        <v-card-text v-else>
+            <p>{{ $t('JobQueue.Empty') }}</p>
+        </v-card-text>
+    </panel>
 </template>
 
 <script lang="ts">
@@ -66,19 +56,16 @@ import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
 import { mdiPlay, mdiPause, mdiTrayFull } from '@mdi/js'
 import JobqueueEntry from '@/components/panels/Status/JobqueueEntry.vue'
+import draggable from 'vuedraggable'
 @Component({
-    components: { JobqueueEntry, Panel },
+    components: { draggable, JobqueueEntry, Panel },
 })
 export default class JobqueuePanel extends Mixins(BaseMixin) {
     mdiPlay = mdiPlay
     mdiPause = mdiPause
     mdiTrayFull = mdiTrayFull
 
-    private contentTdWidth = 100
-
-    declare $refs: {
-        jobqueuePanel: any
-    }
+    joblist = []
 
     get jobs() {
         return this.$store.getters['server/jobQueue/getJobs']
@@ -88,14 +75,6 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
         return this.$store.state.server.jobQueue.queue_state ?? ''
     }
 
-    get countPerPage() {
-        return this.$store.state.gui.view.jobqueue.countPerPage
-    }
-
-    set countPerPage(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'view.jobqueue.countPerPage', value: newVal })
-    }
-
     startJobqueue() {
         this.$store.dispatch('server/jobQueue/start')
     }
@@ -104,24 +83,21 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
         this.$store.dispatch('server/jobQueue/pause')
     }
 
-    mounted() {
-        this.calcContentTdWidth()
-    }
-
-    calcContentTdWidth() {
-        this.contentTdWidth = this.$refs.jobqueuePanel?.$el?.clientWidth - 48 - 32
-    }
-
-    handleResize() {
-        this.$nextTick(() => {
-            this.calcContentTdWidth()
+    updateOrder(event: { oldIndex: number; newIndex: number }) {
+        this.$store.dispatch('server/jobQueue/changePosition', {
+            newIndex: event.newIndex,
+            oldIndex: event.oldIndex,
         })
     }
 }
 </script>
 
-<style scoped>
-.jobqueue-panel {
-    position: relative;
+<style lang="scss">
+.jobqueue-list > div + div {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.jobqueue-list > div.ghost {
+    background-color: rgba(255, 255, 255, 0.12);
 }
 </style>
diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index 7de8ca37b..d1c80bbaa 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -1,40 +1,19 @@
 <template>
-    <v-card ref="filesJobqueue" class="filesJobqueue" flat>
-        <v-data-table
-            :items="jobsTable"
-            hide-default-footer
-            class="dashboard-jobqueue-table"
-            sort-by="time_added"
-            mobile-breakpoint="0">
-            <template #no-data>
-                <div class="text-center">{{ $t('Panels.StatusPanel.EmptyJobqueue') }}</div>
-            </template>
-
-            <template #item="{ item, index }">
-                <jobqueue-entry
-                    :key="item.job_id"
-                    :item="item"
-                    :is-first="index === 0"
-                    :content-td-width="contentTdWidth" />
-            </template>
-            <template v-if="jobsRest.length" #body.append>
-                <tr>
-                    <td class="pr-0 text-center" style="width: 32px">
-                        <v-icon>{{ mdiFileMultiple }}</v-icon>
-                    </td>
-                    <td class="pr-2">
-                        {{
-                            $tc('Panels.StatusPanel.JobqueueMoreFiles', restJobsLength, {
-                                count: restJobsLength,
-                            })
-                        }}
-                        <br />
-                        <small>{{ descriptionRestJobs }}</small>
-                    </td>
-                </tr>
-            </template>
-        </v-data-table>
-        <resize-observer @notify="handleResize" />
+    <v-card class="filesJobqueue" flat>
+        <template v-if="jobs.length">
+            <v-row class="mx-0 mt-0 pb-3">
+                <v-col class="jobqueue-list">
+                    <jobqueue-entry
+                        v-for="(job, index) in jobsTable"
+                        :key="job.job_id"
+                        :job="job"
+                        :show-handle="false"
+                        :show-print-button="index === 0" />
+                    <jobqueue-entry-rest v-if="jobsRest.length" :jobs="jobsRest" />
+                </v-col>
+            </v-row>
+        </template>
+        <div v-else class="text-center">{{ $t('Panels.StatusPanel.EmptyJobqueue') }}</div>
     </v-card>
 </template>
 
@@ -42,122 +21,37 @@
 import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import { mdiFileMultiple } from '@mdi/js'
 import JobqueueEntry from '@/components/panels/Status/JobqueueEntry.vue'
 @Component({
     components: { JobqueueEntry },
 })
 export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
-    mdiFileMultiple = mdiFileMultiple
-
-    private contentTdWidth = 100
-
-    declare $refs: {
-        filesJobqueue: any
-    }
-
     get jobs() {
         return this.$store.getters['server/jobQueue/getJobs'] ?? []
     }
 
-    get jobsTable() {
-        return this.jobs.slice(0, 5)
-    }
-
-    get jobsRest() {
-        return this.jobs.slice(5)
-    }
-
-    get restJobsLength() {
-        let count = 0
-
-        this.jobsRest.forEach((item: ServerJobQueueStateJob) => {
-            count += (item.combinedIds?.length ?? 0) + 1
-        })
+    get maxLength() {
+        if (this.jobs.length > 5) return 4
 
-        return count
+        return 5
     }
 
-    get descriptionRestJobs() {
-        let filamentLength = 0
-        let filamentWeight = 0
-        let printTime = 0
-
-        this.jobsRest.forEach((item: ServerJobQueueStateJob) => {
-            const count = (item.combinedIds?.length ?? 0) + 1
-
-            if (item.metadata?.filament_total) filamentLength += item.metadata?.filament_total * count
-            if (item.metadata?.filament_weight_total) filamentWeight += item.metadata?.filament_weight_total * count
-            if (item.metadata?.estimated_time) printTime += item.metadata.estimated_time * count
-        })
-
-        let output = ''
-
-        output += this.$t('Files.Filament') + ': '
-        if (filamentLength || filamentWeight) {
-            if (filamentLength) output += filamentLength.toFixed() + ' mm'
-            if (filamentLength && filamentWeight) output += ' / '
-            if (filamentWeight) output += filamentWeight.toFixed(2) + ' g'
-        } else output += '--'
-
-        output += ', ' + this.$t('Files.PrintTime') + ': '
-        if (printTime) output += this.formatPrintTime(printTime)
-        else output += '--'
-
-        return output
+    get jobsTable() {
+        return this.jobs.slice(0, this.maxLength)
     }
 
-    formatPrintTime(totalSeconds: number) {
-        if (totalSeconds) {
-            let output = ''
-
-            const days = Math.floor(totalSeconds / (3600 * 24))
-            if (days) {
-                totalSeconds %= 3600 * 24
-                output += days + 'd'
-            }
-
-            const hours = Math.floor(totalSeconds / 3600)
-            totalSeconds %= 3600
-            if (hours) output += ' ' + hours + 'h'
-
-            const minutes = Math.floor(totalSeconds / 60)
-            if (minutes) output += ' ' + minutes + 'm'
-
-            const seconds = totalSeconds % 60
-            if (seconds) output += ' ' + seconds.toFixed(0) + 's'
-
-            return output
-        }
-
-        return '--'
+    get jobsRest() {
+        return this.jobs.slice(this.maxLength)
     }
 
     startJobqueue() {
         this.$store.dispatch('server/jobQueue/start')
     }
-
-    mounted() {
-        setTimeout(() => {
-            this.calcContentTdWidth()
-        }, 200)
-    }
-
-    calcContentTdWidth() {
-        this.contentTdWidth = this.$refs.filesJobqueue?.$el?.clientWidth - 48 - 48 - 32
-    }
-
-    handleResize() {
-        this.$nextTick(() => {
-            this.calcContentTdWidth()
-        })
-    }
 }
 </script>
 
 <style scoped>
-.filesJobqueue {
-    position: relative;
+.jobqueue-list > div + div {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 </style>
diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 6a1a6ea72..0f0fdc90d 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -1,116 +1,75 @@
 <template>
-    <tr
-        v-longpress:600="(e) => showContextMenu(e, item)"
-        class="cursor-pointer"
-        @contextmenu="showContextMenu($event, item)">
-        <td class="pr-0 text-center" style="width: 32px">
-            <template v-if="smallThumbnail && bigThumbnail">
-                <v-tooltip
-                    v-if="smallThumbnail && bigThumbnail"
-                    top
-                    content-class="tooltip__content-opacity1"
-                    :color="bigThumbnailTooltipColor">
-                    <template #activator="{ on, attrs }">
-                        <vue-load-image>
-                            <img slot="image" :src="smallThumbnail" width="32" height="32" v-bind="attrs" v-on="on" />
-                            <div slot="preloader">
-                                <v-progress-circular indeterminate color="primary" />
-                            </div>
-                            <div slot="error">
-                                <v-icon>{{ mdiFile }}</v-icon>
-                            </div>
-                        </vue-load-image>
-                    </template>
-                    <span><img :src="bigThumbnail" width="250" /></span>
-                </v-tooltip>
-            </template>
-            <template v-else-if="smallThumbnail">
-                <vue-load-image>
-                    <img slot="image" :src="smallThumbnail" width="32" height="32" />
-                    <div slot="preloader">
-                        <v-progress-circular indeterminate color="primary" />
-                    </div>
-                    <div slot="error">
-                        <v-icon>{{ mdiFile }}</v-icon>
-                    </div>
-                </vue-load-image>
-            </template>
-            <template v-else>
-                <v-icon>{{ mdiFile }}</v-icon>
-            </template>
-        </td>
-        <td class="pr-2">
-            <template v-if="isFirst && !printerIsPrinting">
-                <v-btn icon color="success" class="float-right minwidth-0 mt-1" @click="startJobqueue">
-                    <v-icon>{{ mdiPlay }}</v-icon>
-                </v-btn>
-            </template>
-            <div class="d-block text-truncate" :style="styleContentTdWidth">
-                <strong v-if="item.combinedIds.length">{{ item.combinedIds.length + 1 }}x</strong>
-                {{ item.filename }}
+    <v-row
+        v-longpress:600="(e) => openContextMenu(e)"
+        class="d-flex flex-row flex-nowrap cursor-pointer"
+        @contextmenu="openContextMenu($event)">
+        <v-col v-if="showHandle" class="col-auto d-flex flex-column justify-center pr-0 py-0">
+            <v-icon class="handle">{{ mdiDragVertical }}</v-icon>
+        </v-col>
+        <v-col class="col-auto d-flex flex-column justify-center pr-0 py-0">
+            <v-tooltip
+                v-if="smallThumbnail"
+                top
+                :disabled="!bigThumbnail"
+                content-class="tooltip__content-opacity1"
+                :color="bigThumbnailTooltipColor">
+                <template #activator="{ on, attrs }">
+                    <vue-load-image>
+                        <img
+                            slot="image"
+                            :src="smallThumbnail"
+                            :width="32"
+                            :height="32"
+                            :alt="job.filename"
+                            v-bind="attrs"
+                            v-on="on" />
+                        <div slot="preloader">
+                            <v-progress-circular indeterminate color="primary" />
+                        </div>
+                        <div slot="error">
+                            <v-icon>{{ mdiFile }}</v-icon>
+                        </div>
+                    </vue-load-image>
+                </template>
+                <span><img :src="bigThumbnail" :width="250" :alt="job.filename" /></span>
+            </v-tooltip>
+            <v-icon v-else>{{ mdiFile }}</v-icon>
+        </v-col>
+        <v-col class="py-1" style="min-width: 0; font-size: 0.875em">
+            <div class="text-truncate">
+                <strong v-if="job.combinedIds?.length">{{ job.combinedIds.length + 1 }}x</strong>
+                {{ job.filename }}
             </div>
-            <small v-if="item?.metadata?.metadataPulled">{{ description }}</small>
-        </td>
-        <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
+            <small v-if="description" class="text-truncate">{{ description }}</small>
+        </v-col>
+        <v-col
+            v-if="showPrintButton && !printerIsPrinting"
+            class="col-auto d-flex flex-column justify-center pa-0 pr-1">
+            <v-btn icon color="success" class="minwidth-0" @click="startJobqueue">
+                <v-icon>{{ mdiPlay }}</v-icon>
+            </v-btn>
+        </v-col>
+        <v-menu v-model="showContextMenu" :position-x="contextMenuX" :position-y="contextMenuY" absolute offset-y>
             <v-list>
-                <v-list-item @click="openChangeCountDialog(contextMenu.item)">
+                <v-list-item @click="printJob">
+                    <v-icon class="mr-1">{{ mdiPlay }}</v-icon>
+                    {{ $t('JobQueue.StartPrint') }}
+                </v-list-item>
+                <v-list-item @click="showChangeCountDialog = true">
                     <v-icon class="mr-1">{{ mdiCounter }}</v-icon>
                     {{ $t('JobQueue.ChangeCount') }}
                 </v-list-item>
-                <v-list-item @click="removeFromJobqueue(contextMenu.item)">
+                <v-list-item @click="removeFromJobqueue">
                     <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
                     {{ $t('JobQueue.RemoveFromQueue') }}
                 </v-list-item>
             </v-list>
         </v-menu>
-        <v-dialog v-model="dialogChangeCount.show" max-width="400">
-            <panel
-                :title="$t('JobQueue.ChangeCount').toString()"
-                :icon="mdiCounter"
-                card-class="jobqueue-change-count-dialog"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="dialogChangeCount.show = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-
-                <v-card-text>
-                    <v-text-field
-                        ref="inputFieldAddToQueueCount"
-                        v-model="dialogChangeCount.count"
-                        :label="$t('JobQueue.Count')"
-                        required
-                        :rules="countInputRules"
-                        hide-spin-buttons
-                        type="number"
-                        @keyup.enter="changeCountAction">
-                        <template #append-outer>
-                            <div class="_spin_button_group">
-                                <v-btn class="mt-n3" icon plain small @click="dialogChangeCount.count++">
-                                    <v-icon>{{ mdiChevronUp }}</v-icon>
-                                </v-btn>
-                                <v-btn
-                                    :disabled="dialogChangeCount.count <= 1"
-                                    class="mb-n3"
-                                    icon
-                                    plain
-                                    small
-                                    @click="dialogChangeCount.count--">
-                                    <v-icon>{{ mdiChevronDown }}</v-icon>
-                                </v-btn>
-                            </div>
-                        </template>
-                    </v-text-field>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer />
-                    <v-btn color="" text @click="dialogChangeCount.show = false">{{ $t('JobQueue.Cancel') }}</v-btn>
-                    <v-btn color="primary" text @click="changeCountAction">{{ $t('JobQueue.ChangeCount') }}</v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
-    </tr>
+        <jobqueue-entry-change-count-dialog
+            :show="showChangeCountDialog"
+            :job="job"
+            @close="showChangeCountDialog = false" />
+    </v-row>
 </template>
 
 <script lang="ts">
@@ -118,83 +77,96 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove } from '@mdi/js'
-import NumberInput from '@/components/inputs/NumberInput.vue'
+import { mdiCloseThick, mdiCounter, mdiDragVertical, mdiFile, mdiPlay, mdiPlaylistRemove } from '@mdi/js'
 import { defaultBigThumbnailBackground } from '@/store/variables'
-@Component({
-    components: { NumberInput },
-})
+@Component
 export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
-    mdiChevronDown = mdiChevronDown
-    mdiChevronUp = mdiChevronUp
     mdiCloseThick = mdiCloseThick
     mdiCounter = mdiCounter
+    mdiDragVertical = mdiDragVertical
     mdiFile = mdiFile
     mdiPlay = mdiPlay
     mdiPlaylistRemove = mdiPlaylistRemove
 
-    @Prop({ type: Object, required: true }) declare item: ServerJobQueueStateJob
-    @Prop({ type: Number, required: true }) declare contentTdWidth: number
-    @Prop({ type: Boolean, default: false }) declare isFirst: boolean
-    private contextMenu: {
-        shown: boolean
-        x: number
-        y: number
-        item: ServerJobQueueStateJob | any
-    } = {
-        shown: false,
-        x: 0,
-        y: 0,
-        item: {},
+    @Prop({ type: Object, required: true }) job!: ServerJobQueueStateJob
+    @Prop({ type: Boolean, default: false }) showPrintButton!: boolean
+    @Prop({ type: Boolean, default: false }) showHandle!: boolean
+
+    showContextMenu = false
+    contextMenuX = 0
+    contextMenuY = 0
+
+    showChangeCountDialog = false
+
+    get smallThumbnail() {
+        return this.$store.getters['server/jobQueue/getSmallThumbnail'](this.job)
     }
 
-    private dialogChangeCount: {
-        show: boolean
-        count: number
-        item: ServerJobQueueStateJob | any
-    } = {
-        show: false,
-        count: 1,
-        item: {},
+    get bigThumbnail() {
+        return this.$store.getters['server/jobQueue/getBigThumbnail'](this.job)
     }
 
-    private countInputRules = [
-        (value: string) => !!value || this.$t('JobQueue.InvalidCountEmpty'),
-        (value: string) => parseInt(value) > 0 || this.$t('JobQueue.InvalidCountGreaterZero'),
-    ]
+    get description() {
+        if (!this.job?.metadata?.metadataPulled) return false
 
-    declare $refs: {
-        filesJobqueue: any
-    }
+        const filamentArray = []
+        let filament = '--'
+        if (this.filamentLength) filamentArray.push(this.filamentLength)
+        if (this.filamentWeight) filamentArray.push(this.filamentWeight)
+        if (filamentArray.length) filament = filamentArray.join(' / ')
+
+        let time = '--'
+        if (this.estimatedTime) time = this.estimatedTime
 
-    get styleContentTdWidth() {
-        return `width: ${this.contentTdWidth}px;`
+        return `${this.$t('Panels.StatusPanel.Filament')}: ${filament}, ${this.$t(
+            'Panels.StatusPanel.PrintTime'
+        )}: ${time}`
     }
 
-    get smallThumbnail() {
-        return this.$store.getters['server/jobQueue/getSmallThumbnail'](this.item)
+    get filamentLength() {
+        const length = this.job.metadata?.filament_total ?? 0
+        if (length === 0) return null
+
+        if (length >= 1000) return (length / 1000).toFixed(1) + ' m'
+
+        return length.toFixed(0) + ' mm'
     }
 
-    get bigThumbnail() {
-        return this.$store.getters['server/jobQueue/getBigThumbnail'](this.item)
+    get filamentWeight() {
+        const weight = this.job.metadata?.filament_weight_total ?? 0
+        if (weight === 0) return null
+
+        if (weight >= 1000) return (length / 1000).toFixed(1) + ' kg'
+
+        return weight.toFixed(0) + ' g'
     }
 
-    get description() {
-        let output = ''
+    get estimatedTime() {
+        let totalSeconds = this.job.metadata?.estimated_time ?? 0
+        if (totalSeconds == 0) return '--'
+
+        const output = []
+
+        const days = Math.floor(totalSeconds / (3600 * 24))
+        if (days) {
+            totalSeconds %= 3600 * 24
+            output.push(days + 'd')
+        }
+
+        const hours = Math.floor(totalSeconds / 3600)
+        totalSeconds %= 3600
+        if (hours) output.push(hours + 'h')
 
-        output += this.$t('Panels.StatusPanel.Filament') + ': '
-        if (this.item.metadata?.filament_total || this.item.metadata.filament_weight_total) {
-            if (this.item.metadata?.filament_total) output += this.item.metadata.filament_total.toFixed() + ' mm'
-            if (this.item.metadata?.filament_total && this.item.metadata.filament_weight_total) output += ' / '
-            if (this.item.metadata?.filament_weight_total)
-                output += this.item.metadata.filament_weight_total.toFixed(2) + ' g'
-        } else output += '--'
+        const minutes = Math.floor(totalSeconds / 60)
+        if (minutes) output.push(minutes + 'm')
 
-        output += ', ' + this.$t('Panels.StatusPanel.PrintTime') + ': '
-        if (this.item.metadata?.estimated_time) output += this.formatPrintTime(this.item.metadata.estimated_time)
-        else output += '--'
+        // skip seconds if there are hours
+        if (hours > 0) return output.join(' ')
 
-        return output
+        const seconds = totalSeconds % 60
+        if (seconds) output.push(seconds.toFixed(0) + 's')
+
+        return output.join(' ')
     }
 
     get bigThumbnailBackground() {
@@ -209,80 +181,31 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         return this.bigThumbnailBackground
     }
 
-    formatPrintTime(totalSeconds: number) {
-        if (totalSeconds) {
-            let output = ''
-
-            const days = Math.floor(totalSeconds / (3600 * 24))
-            if (days) {
-                totalSeconds %= 3600 * 24
-                output += days + 'd'
-            }
-
-            const hours = Math.floor(totalSeconds / 3600)
-            totalSeconds %= 3600
-            if (hours) output += ' ' + hours + 'h'
-
-            const minutes = Math.floor(totalSeconds / 60)
-            if (minutes) output += ' ' + minutes + 'm'
+    openContextMenu(e: any) {
+        e?.preventDefault()
 
-            const seconds = totalSeconds % 60
-            if (seconds) output += ' ' + seconds.toFixed(0) + 's'
-
-            return output
+        if (this.showContextMenu) {
+            this.showContextMenu = false
+            return
         }
 
-        return '--'
+        this.showContextMenu = true
+        this.contextMenuX = e?.clientX || e?.pageX || window.screenX / 2
+        this.contextMenuY = e?.clientY || e?.pageY || window.screenY / 2
     }
 
-    showContextMenu(e: any, item: ServerJobQueueStateJob) {
-        if (!this.contextMenu.shown) {
-            e?.preventDefault()
-            this.contextMenu.shown = true
-            this.contextMenu.x = e?.clientX || e?.pageX || window.screenX / 2
-            this.contextMenu.y = e?.clientY || e?.pageY || window.screenY / 2
-            this.contextMenu.item = item
-            this.$nextTick(() => {
-                this.contextMenu.shown = true
-            })
-        }
+    printJob() {
+        this.$store.dispatch('server/jobQueue/startByJobId', this.job.job_id)
     }
 
     startJobqueue() {
         this.$store.dispatch('server/jobQueue/start')
     }
 
-    removeFromJobqueue(item: ServerJobQueueStateJob) {
-        const ids = [...(item.combinedIds ?? [])]
-        ids.push(item.job_id)
+    removeFromJobqueue() {
+        const ids = [...(this.job.combinedIds ?? []), this.job.job_id]
 
         this.$store.dispatch('server/jobQueue/deleteFromQueue', ids)
     }
-
-    openChangeCountDialog(item: ServerJobQueueStateJob) {
-        this.dialogChangeCount.show = true
-        this.dialogChangeCount.count = (item.combinedIds?.length ?? 0) + 1
-        this.dialogChangeCount.item = item
-    }
-
-    changeCountAction() {
-        this.$store.dispatch('server/jobQueue/changeCount', {
-            job_id: this.dialogChangeCount.item.job_id,
-            count: this.dialogChangeCount.count,
-        })
-        this.dialogChangeCount.show = false
-    }
 }
 </script>
-
-<style scoped>
-.filesJobqueue {
-    position: relative;
-}
-._spin_button_group {
-    width: 24px;
-    margin-top: -6px;
-    margin-left: -6px;
-    margin-bottom: -6px;
-}
-</style>
diff --git a/src/components/panels/Status/JobqueueEntryRest.vue b/src/components/panels/Status/JobqueueEntryRest.vue
new file mode 100644
index 000000000..02d413d8f
--- /dev/null
+++ b/src/components/panels/Status/JobqueueEntryRest.vue
@@ -0,0 +1,120 @@
+<template>
+    <v-row class="d-flex flex-row flex-nowrap">
+        <v-col class="col-auto d-flex flex-column justify-center pr-0 py-0">
+            <v-icon style="width: 32px">{{ mdiFileMultiple }}</v-icon>
+        </v-col>
+        <v-col class="py-2" style="min-width: 0; font-size: 0.875em">
+            <div class="text-truncate">{{ headline }}</div>
+            <small class="text-truncate">{{ description }}</small>
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
+import { mdiFileMultiple } from '@mdi/js'
+@Component
+export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
+    mdiFileMultiple = mdiFileMultiple
+
+    @Prop({ type: Array, required: true }) jobs!: ServerJobQueueStateJob[]
+
+    get sums() {
+        const sums = {
+            filamentLength: 0,
+            filamentWeight: 0,
+            estimatedTime: 0,
+        }
+
+        this.jobs.forEach((job: ServerJobQueueStateJob) => {
+            const count = (job.combinedIds?.length ?? 0) + 1
+
+            sums.filamentLength += (job.metadata?.filament_total ?? 0) * count
+            sums.filamentWeight += (job.metadata?.filament_weight_total ?? 0) * count
+            sums.estimatedTime += (job.metadata?.estimated_time ?? 0) * count
+        })
+
+        return sums
+    }
+
+    get count() {
+        let count = 0
+
+        this.jobs.forEach((item: ServerJobQueueStateJob) => {
+            count += (item.combinedIds?.length ?? 0) + 1
+        })
+
+        return count
+    }
+
+    get headline() {
+        return this.$tc('Panels.StatusPanel.JobqueueMoreFiles', this.count, {
+            count: this.count,
+        })
+    }
+
+    get description() {
+        const filamentArray = []
+        let filament = '--'
+        if (this.filamentLength) filamentArray.push(this.filamentLength)
+        if (this.filamentWeight) filamentArray.push(this.filamentWeight)
+        if (filamentArray.length) filament = filamentArray.join(' / ')
+
+        let time = '--'
+        if (this.estimatedTime) time = this.estimatedTime
+
+        return `${this.$t('Panels.StatusPanel.Filament')}: ${filament}, ${this.$t(
+            'Panels.StatusPanel.PrintTime'
+        )}: ${time}`
+    }
+
+    get filamentLength() {
+        const length = this.sums.filamentLength
+        if (length === 0) return null
+
+        if (length >= 1000) return (length / 1000).toFixed(1) + ' m'
+
+        return length.toFixed(0) + ' mm'
+    }
+
+    get filamentWeight() {
+        const weight = this.sums.filamentWeight
+        if (weight === 0) return null
+
+        if (weight >= 1000) return (length / 1000).toFixed(1) + ' kg'
+
+        return weight.toFixed(0) + ' g'
+    }
+
+    get estimatedTime() {
+        let totalSeconds = this.sums.estimatedTime
+        if (totalSeconds == 0) return '--'
+
+        const output = []
+
+        const days = Math.floor(totalSeconds / (3600 * 24))
+        if (days) {
+            totalSeconds %= 3600 * 24
+            output.push(days + 'd')
+        }
+
+        const hours = Math.floor(totalSeconds / 3600)
+        totalSeconds %= 3600
+        if (hours) output.push(hours + 'h')
+
+        const minutes = Math.floor(totalSeconds / 60)
+        if (minutes) output.push(minutes + 'm')
+
+        // skip seconds if there are hours
+        if (hours > 0) return output.join(' ')
+
+        const seconds = totalSeconds % 60
+        if (seconds) output.push(seconds.toFixed(0) + 's')
+
+        return output.join(' ')
+    }
+}
+</script>
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index 2c1efcab1..1c68082ea 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -160,22 +160,22 @@ export default class StatusPanel extends Mixins(BaseMixin) {
     mdiDotsVertical = mdiDotsVertical
     mdiAlertOutline = mdiAlertOutline
 
-    private boolShowObjects = false
-    private boolShowPauseAtLayer = false
-
     declare $refs: {
         bigThumbnail: any
     }
 
-    private activeTab = 'files'
-    private lastFilename = ''
+    boolShowObjects = false
+    boolShowPauseAtLayer = false
+
+    activeTab = 'files'
+    lastFilename = ''
 
     get jobs() {
         return this.$store.getters['server/jobQueue/getJobs']
     }
 
     get jobsCount() {
-        return this.jobs.length ?? 0
+        return this.$store.getters['server/jobQueue/getJobsCount']
     }
 
     get jobQueueBadgeColor() {
diff --git a/src/locales/en.json b/src/locales/en.json
index 37a803a5b..58639460a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -198,7 +198,6 @@
         "EditFile": "Edit File",
         "Empty": "Empty",
         "ExtruderTemp": "Extruder Temp.",
-        "Filament": "Filament",
         "FilamentName": "Filament Name",
         "FilamentType": "Filament Type",
         "FilamentUsage": "Filament Usage",
@@ -390,7 +389,6 @@
         "TotalTime": "Total Time"
     },
     "JobQueue": {
-        "AllJobs": "All Jobs",
         "Cancel": "Cancel",
         "ChangeCount": "Change count",
         "Count": "Count",
@@ -398,10 +396,10 @@
         "InvalidCountEmpty": "Input must not be empty!",
         "InvalidCountGreaterZero": "Input must be greater than 0!",
         "JobQueue": "Job Queue",
-        "Jobs": "Jobs",
         "Pause": "Pause",
         "RemoveFromQueue": "Remove from Queue",
-        "Start": "Start"
+        "Start": "Start",
+        "StartPrint": "Start Job"
     },
     "Machine": {
         "ConfigFilesPanel": {
diff --git a/src/locales/pl.json b/src/locales/pl.json
index da91fd503..7887bada8 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -388,7 +388,6 @@
         "TotalTime": "Całkowity czas druku"
     },
     "JobQueue": {
-        "AllJobs": "Wszystkie wydruki",
         "Cancel": "Anuluj",
         "ChangeCount": "Zmień ilość",
         "Count": "Ilość",
@@ -396,7 +395,6 @@
         "InvalidCountEmpty": "Pole wejściowe nie może być puste!",
         "InvalidCountGreaterZero": "Wprowadzona wartość musi być większa niż 0!",
         "JobQueue": "Kolejka wydruków",
-        "Jobs": "Wydruki",
         "Pause": "Pauza",
         "RemoveFromQueue": "Usuń z kolejki",
         "Start": "Start"
diff --git a/src/store/server/jobQueue/actions.ts b/src/store/server/jobQueue/actions.ts
index 705eb09c8..f8afb3afd 100644
--- a/src/store/server/jobQueue/actions.ts
+++ b/src/store/server/jobQueue/actions.ts
@@ -18,8 +18,8 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
     },
 
     async getStatus({ commit, dispatch }, payload) {
-        if ('queued_jobs' in payload) await commit('setQueuedJobs', payload.queued_jobs)
-        if ('queue_state' in payload) await commit('setQueueState', payload.queue_state)
+        if ('queued_jobs' in payload) commit('setQueuedJobs', payload.queued_jobs)
+        if ('queue_state' in payload) commit('setQueueState', payload.queue_state)
 
         await dispatch('socket/removeInitModule', 'server/jobQueue/init', { root: true })
     },
@@ -28,29 +28,61 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
         Vue.$socket.emit('server.job_queue.post_job', { filenames: filenames })
     },
 
-    changeCount({ getters }, payload: { job_id: string; count: number }) {
-        const filenames: string[] = []
-        const jobs = getters['getJobs']
-
-        jobs.forEach((job: ServerJobQueueStateJob) => {
-            if (job.job_id === payload.job_id) {
-                for (let i = 0; i < payload.count; i++) {
-                    filenames.push(job.filename)
-                }
-
-                return
-            }
-
-            const count = (job.combinedIds?.length ?? 0) + 1
-            for (let i = 0; i < count; i++) {
-                filenames.push(job.filename)
-            }
-        })
-
-        Vue.$socket.emit('server.job_queue.post_job', {
-            filenames,
-            reset: true,
-        })
+    changeCount({ dispatch, getters }, payload: { job_id: string; count: number }) {
+        const jobs: ServerJobQueueStateJob[] = getters['getJobs']
+
+        const index = jobs.findIndex((job) => job.job_id === payload.job_id)
+        if (index === -1) return
+
+        jobs[index].combinedIds = Array(payload.count - 1).fill(payload.job_id)
+
+        dispatch('sendNewQueueList', { jobs })
+    },
+
+    changePosition({ dispatch, getters }, payload: { oldIndex: number; newIndex: number }) {
+        const jobs: ServerJobQueueStateJob[] = getters['getJobs']
+
+        const job = jobs.splice(payload.oldIndex, 1)[0]
+        jobs.splice(payload.newIndex, 0, job)
+
+        dispatch('sendNewQueueList', { jobs })
+    },
+
+    startByJobId({ dispatch, getters }, job_id: string) {
+        const jobs: ServerJobQueueStateJob[] = getters['getJobs']
+
+        const index = jobs.findIndex((job) => job.job_id === job_id)
+        if (index === -1) return
+
+        const job = jobs.splice(index, 1)[0]
+        jobs.splice(0, 0, job)
+
+        dispatch('sendNewQueueList', { jobs, printStart: true })
+    },
+
+    sendNewQueueList(_, payload: { jobs: ServerJobQueueStateJob[]; printStart?: boolean }) {
+        const filenames = payload.jobs
+            .map((job) => {
+                const numJobs = (job.combinedIds?.length ?? 0) + 1
+                // return job.filename if the job will be only printed one time
+                if (numJobs === 1) return job.filename
+
+                // return an array of job.filename if the job will be printed multiple times
+                return Array(numJobs).fill(job.filename)
+            })
+            .flat()
+
+        const emitOptions: { action?: string } = {}
+        if (payload.printStart) emitOptions.action = 'server/jobQueue/start'
+
+        Vue.$socket.emit(
+            'server.job_queue.post_job',
+            {
+                filenames,
+                reset: true,
+            },
+            emitOptions
+        )
     },
 
     deleteFromQueue(_, job_ids: string[]) {