diff --git a/.prettierrc b/.prettierrc
index 456bf2ce1..b0c885617 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -18,6 +18,14 @@
             "options": {
                 "tabWidth": 2
             }
+        },
+        {
+            "files": "src/locales/*.json",
+            "options": {
+                "plugins": ["prettier-plugin-sort-json"],
+                "jsonRecursiveSort": true,
+                "jsonSortOrder": "{ \"placeThisFirst\": null, \"/^[a-zA-Z0-9]/\": \"caseInsensitiveNumeric\"  }"
+            }
         }
     ]
 }
diff --git a/package-lock.json b/package-lock.json
index 255490f1d..cc060d99e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,7 +75,8 @@
                 "eslint-plugin-vue": "^9.0.0",
                 "postcss": "^8.4.31",
                 "postcss-nesting": "^12.0.1",
-                "prettier": "^3.0.0",
+                "prettier": "^3.3.3",
+                "prettier-plugin-sort-json": "^4.0.0",
                 "sass": "~1.32",
                 "start-server-and-test": "^2.0.5",
                 "typescript": "^4.5.5",
@@ -8052,9 +8053,9 @@
             }
         },
         "node_modules/prettier": {
-            "version": "3.0.3",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
-            "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
+            "version": "3.3.3",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+            "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
             "dev": true,
             "bin": {
                 "prettier": "bin/prettier.cjs"
@@ -8066,6 +8067,18 @@
                 "url": "https://github.com/prettier/prettier?sponsor=1"
             }
         },
+        "node_modules/prettier-plugin-sort-json": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-sort-json/-/prettier-plugin-sort-json-4.0.0.tgz",
+            "integrity": "sha512-zV5g+bWFD2zAqyQ8gCkwUTC49o9FxslaUdirwivt5GZHcf57hCocavykuyYqbExoEsuBOg8IU36OY7zmVEMOWA==",
+            "dev": true,
+            "engines": {
+                "node": ">=18.0.0"
+            },
+            "peerDependencies": {
+                "prettier": "^3.0.0"
+            }
+        },
         "node_modules/pretty-bytes": {
             "version": "5.6.0",
             "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index 65de31342..c97fef7c1 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,8 @@
         "eslint-plugin-vue": "^9.0.0",
         "postcss": "^8.4.31",
         "postcss-nesting": "^12.0.1",
-        "prettier": "^3.0.0",
+        "prettier": "^3.3.3",
+        "prettier-plugin-sort-json": "^4.0.0",
         "sass": "~1.32",
         "start-server-and-test": "^2.0.5",
         "typescript": "^4.5.5",
diff --git a/src/components/TheConnectingDialog.vue b/src/components/TheConnectingDialog.vue
index d32bdd7c9..68bff8c66 100644
--- a/src/components/TheConnectingDialog.vue
+++ b/src/components/TheConnectingDialog.vue
@@ -1,35 +1,30 @@
-<style scoped></style>
-
 <template>
     <v-dialog v-model="showDialog" persistent :width="400">
-        <v-card>
-            <v-toolbar flat dense>
-                <v-toolbar-title>
-                    <span class="subheading">
-                        <v-icon left>{{ mdiConnection }}</v-icon>
-                        {{ titleText }}
-                    </span>
-                </v-toolbar-title>
-            </v-toolbar>
+        <panel :title="titleText" :icon="mdiConnection" card-class="the-connection-dialog" :margin-bottom="false">
             <v-card-text v-if="connectingFailed" class="pt-5">
-                <connection-status :moonraker="false"></connection-status>
-                <p class="text-center mt-3">{{ $t('ConnectionDialog.CannotConnectTo', { host: formatHostname }) }}</p>
+                <connection-status :moonraker="false" />
+                <p class="text-center mt-3 mb-0">
+                    {{ $t('ConnectionDialog.CannotConnectTo', { host: formatHostname }) }}
+                </p>
+                <p v-if="connectionFailedMessage" class="text-center mt-1 red--text">
+                    {{ $t('ConnectionDialog.ErrorMessage', { message: connectionFailedMessage }) }}
+                </p>
                 <template v-if="counter > 2">
-                    <v-divider class="my-3"></v-divider>
+                    <v-divider class="my-3" />
                     <p>{{ $t('ConnectionDialog.CheckMoonrakerLog') }}</p>
                     <ul>
                         <li>~/printer_data/logs/moonraker.log</li>
                     </ul>
-                    <v-divider class="mt-4 mb-5"></v-divider>
+                    <v-divider class="mt-4 mb-5" />
                 </template>
-                <div class="text-center">
+                <div class="text-center mt-3">
                     <v-btn class="primary--text" @click="reconnect">{{ $t('ConnectionDialog.TryAgain') }}</v-btn>
                 </div>
             </v-card-text>
             <v-card-text v-else class="pt-5">
-                <v-progress-linear :color="progressBarColor" indeterminate></v-progress-linear>
+                <v-progress-linear :color="progressBarColor" indeterminate />
             </v-card-text>
-        </v-card>
+        </panel>
     </v-dialog>
 </template>
 
@@ -52,10 +47,6 @@ export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
 
     counter = 0
 
-    get protocol() {
-        return this.$store.state.socket.protocol
-    }
-
     get hostname() {
         return this.$store.state.socket.hostname
     }
@@ -94,6 +85,10 @@ export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
         return this.formatHostname
     }
 
+    get connectionFailedMessage() {
+        return this.$store.state.socket.connectionFailedMessage ?? null
+    }
+
     reconnect() {
         this.counter++
         this.$store.dispatch('socket/setData', { connectingFailed: false })
diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index e740c7db8..215ed1ccd 100644
--- a/src/components/TheEditor.vue
+++ b/src/components/TheEditor.vue
@@ -31,6 +31,10 @@
                         <v-icon small class="mr-1">{{ mdiHelp }}</v-icon>
                         {{ $t('Editor.ConfigReference') }}
                     </v-btn>
+                    <v-btn v-if="configFileStructure" text tile class="d-none d-md-flex" @click="showFileStructure()">
+                        <v-icon small class="mr-1">{{ mdiFormatListCheckbox }}</v-icon>
+                        {{ $t('Editor.FileStructure') }}
+                    </v-btn>
                     <v-btn
                         v-if="restartServiceNameExists"
                         color="primary"
@@ -48,17 +52,50 @@
                         <v-icon>{{ mdiCloseThick }}</v-icon>
                     </v-btn>
                 </template>
-                <v-card-text class="pa-0">
+                <v-card-text class="pa-0 d-flex">
                     <codemirror-async
                         v-if="show"
                         ref="editor"
                         v-model="sourcecode"
                         :name="filename"
-                        :file-extension="fileExtension" />
+                        :file-extension="fileExtension"
+                        class="codemirror"
+                        @lineChange="lineChanges" />
+                    <div v-if="fileStructureSidebar" class="d-none d-md-flex structure-sidebar">
+                        <v-treeview
+                            activatable
+                            dense
+                            :active="structureActive"
+                            :open="structureOpen"
+                            item-key="line"
+                            :items="configFileStructure"
+                            class="w-100"
+                            @update:active="activeChanges">
+                            <template #label="{ item }">
+                                <div
+                                    class="cursor-pointer _structure-sidebar-item"
+                                    :class="item.type == 'item' ? 'ͼp' : 'ͼt'">
+                                    {{ item.name }}
+                                </div>
+                            </template>
+                            <template v-if="restartServiceName === 'klipper'" #append="{ item }">
+                                <v-btn
+                                    v-if="item.type == 'section'"
+                                    icon
+                                    small
+                                    plain
+                                    color="grey darken-2"
+                                    :href="klipperConfigReference + '#' + item.name.split(' ')[0]"
+                                    target="_blank">
+                                    <v-icon small class="mr-1">{{ mdiHelpCircle }}</v-icon>
+                                </v-btn>
+                            </template>
+                        </v-treeview>
+                    </div>
                 </v-card-text>
             </panel>
         </v-dialog>
-        <v-snackbar v-model="loaderBool" :timeout="-1" :value="true" fixed right bottom>
+        <v-snackbar v-model="loaderBool" :timeout="-1" fixed right bottom>
             <div>
                 {{ snackbarHeadline }}
                 <br />
@@ -123,7 +160,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { capitalize, formatFilesize, windowBeforeUnloadFunction } from '@/plugins/helpers'
 import Panel from '@/components/ui/Panel.vue'
@@ -139,9 +176,10 @@ import {
     mdiHelpCircle,
     mdiRestart,
     mdiUsb,
+    mdiFormatListCheckbox,
 } from '@mdi/js'
-import type Codemirror from '@/components/inputs/Codemirror.vue'
 import DevicesDialog from '@/components/dialogs/DevicesDialog.vue'
+import { ConfigFileSection } from '@/store/files/types'
 
 @Component({
     components: { DevicesDialog, Panel, CodemirrorAsync },
@@ -149,6 +187,9 @@ import DevicesDialog from '@/components/dialogs/DevicesDialog.vue'
 export default class TheEditor extends Mixins(BaseMixin) {
     dialogConfirmChange = false
     dialogDevices = false
+    fileStructureSidebar = true
+    structureActive: number[] = []
+    structureOpen: number[] = []
 
     formatFilesize = formatFilesize
 
@@ -164,10 +205,10 @@ export default class TheEditor extends Mixins(BaseMixin) {
     mdiFileDocumentEditOutline = mdiFileDocumentEditOutline
     mdiFileDocumentOutline = mdiFileDocumentOutline
     mdiUsb = mdiUsb
+    mdiFormatListCheckbox = mdiFormatListCheckbox
 
-    declare $refs: {
-        editor: Codemirror
-    }
+    //@ts-ignore
+    @Ref('editor') editor!: CodemirrorAsync
 
     get changed() {
         return this.$store.state.editor.changed ?? false
@@ -305,6 +346,48 @@ export default class TheEditor extends Mixins(BaseMixin) {
         return url
     }
 
+    get configFileStructure() {
+        if (!['conf', 'cfg'].includes(this.fileExtension)) {
+            this.fileStructureSidebar = false
+            return null
+        }
+
+        const lines = this.sourcecode.split(/\n/gi)
+        const regex = /^[^#\S]*?(\[(?<section>.*?)]|(?<name>\w+)\s*?[:=])/gim
+        const structure: ConfigFileSection[] = []
+
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i]
+            const matches = [...line.matchAll(regex)]
+
+            // break if no matches were found
+            if (matches.length === 0) continue
+
+            const match = matches[0]
+            if (match['groups']['section']) {
+                structure.push({
+                    name: match['groups']['section'],
+                    type: 'section',
+                    line: i + 1,
+                    children: [],
+                })
+
+                continue
+            }
+
+            if (match['groups']['name']) {
+                structure[structure.length - 1]['children'].push({
+                    name: match['groups']['name'],
+                    type: 'item',
+                    line: i + 1,
+                })
+            }
+        }
+
+        this.fileStructureSidebar = true
+        return structure
+    }
+
     cancelDownload() {
         this.$store.dispatch('editor/cancelLoad')
     }
@@ -337,6 +420,29 @@ export default class TheEditor extends Mixins(BaseMixin) {
         })
     }
 
+    showFileStructure() {
+        this.fileStructureSidebar = !this.fileStructureSidebar
+    }
+
+    activeChanges(key: any) {
+        this.editor?.gotoLine(key)
+    }
+
+    lineChanges(line: number) {
+        this.configFileStructure?.map((item) => {
+            if (item.line == line) {
+                this.structureActive = [line]
+            } else {
+                item.children?.map((child) => {
+                    if (child.line == line) {
+                        this.structureActive = [line]
+                        if (!this.structureOpen.includes(item.line)) this.structureOpen.push(item.line)
+                    }
+                })
+            }
+        })
+    }
+
     @Watch('changed')
     changedChanged(newVal: boolean) {
         if (!this.confirmUnsavedChanges) return
@@ -398,4 +504,23 @@ export default class TheEditor extends Mixins(BaseMixin) {
     background-color: var(--color-primary);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fffff'/%3E %3C/svg%3E");
 }
+
+@media screen and (min-width: 960px) {
+    .codemirror {
+        width: calc(100% - 300px);
+    }
+}
+.structure-sidebar {
+    width: 300px;
+    overflow-y: auto;
+}
+._structure-sidebar-item {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+::v-deep .v-treeview-node__level + .v-treeview-node__level {
+    width: 12px;
+}
 </style>
diff --git a/src/components/console/ConsoleTableEntry.vue b/src/components/console/ConsoleTableEntry.vue
index e00ff72c2..f8d14f631 100644
--- a/src/components/console/ConsoleTableEntry.vue
+++ b/src/components/console/ConsoleTableEntry.vue
@@ -1,7 +1,13 @@
 <template>
     <v-row :class="entryStyle">
         <v-col class="col-auto pr-0 text--disabled console-time">{{ entryFormatTime }}</v-col>
-        <v-col :class="messageClass" style="min-width: 0" @click.capture="commandClick" v-html="event.formatMessage" />
+        <v-col
+            v-if="!rawOutput"
+            :class="messageClass"
+            style="min-width: 0"
+            @click.capture="commandClick"
+            v-html="event.formatMessage" />
+        <v-col v-else :class="messageClass" style="min-width: 0" @click.capture="commandClick" v-text="event.message" />
     </v-row>
 </template>
 
@@ -38,6 +44,10 @@ export default class ConsoleTableEntry extends Mixins(BaseMixin) {
         return classes
     }
 
+    get rawOutput() {
+        return this.$store.state.gui.console.rawOutput ?? false
+    }
+
     commandClick(event: Event) {
         const eventTarget = event.target as Element
         if (eventTarget.localName === 'a' && eventTarget.className.indexOf('command') !== -1) {
diff --git a/src/components/dialogs/CancelJobDialog.vue b/src/components/dialogs/CancelJobDialog.vue
new file mode 100644
index 000000000..db9edc6b9
--- /dev/null
+++ b/src/components/dialogs/CancelJobDialog.vue
@@ -0,0 +1,50 @@
+<template>
+    <v-dialog :value="showDialog" width="400" persistent>
+        <panel
+            :title="$t('CancelJobDialog.CancelJob')"
+            toolbar-color="normal"
+            card-class="cancel-job-dialog"
+            :icon="mdiStopCircleOutline"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closePrompt">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>{{ $t('CancelJobDialog.AreYouSure') }}</v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closePrompt">{{ $t('CancelJobDialog.No') }}</v-btn>
+                <v-btn color="primary" text @click="cancelJob">{{ $t('CancelJobDialog.Yes') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+
+import { mdiCloseThick, mdiStopCircleOutline } from '@mdi/js'
+
+@Component({
+    components: { Panel },
+})
+export default class CancelJobDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiStopCircleOutline = mdiStopCircleOutline
+
+    @Prop({ type: Boolean, default: false }) showDialog!: boolean
+
+    cancelJob() {
+        this.$emit('cancel-job')
+    }
+
+    closePrompt() {
+        this.$emit('close')
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/dialogs/TimelapseRenderingsettingsDialog.vue b/src/components/dialogs/TimelapseRenderingsettingsDialog.vue
new file mode 100644
index 000000000..035b84561
--- /dev/null
+++ b/src/components/dialogs/TimelapseRenderingsettingsDialog.vue
@@ -0,0 +1,134 @@
+<template>
+    <v-dialog :value="show" :max-width="700" :max-height="500">
+        <panel
+            :title="$t('Timelapse.RenderSettings')"
+            :icon="mdiTextBoxSearchOutline"
+            card-class="timelapse-rendersettings-dialog-panel"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon @click="close">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text class="">
+                <v-row>
+                    <v-col class="col-4">
+                        <v-select
+                            v-model="variable_fps"
+                            :label="$t('Timelapse.Type')"
+                            :items="framerateTypeOptions"
+                            outlined
+                            dense
+                            hide-details />
+                    </v-col>
+                    <v-col class="col-4">
+                        <template v-if="variable_fps">
+                            <v-text-field
+                                v-model="variable_fps_min"
+                                :label="$t('Timelapse.MinFramerate')"
+                                type="number"
+                                outlined
+                                dense
+                                hide-details
+                                hide-spin-buttons />
+                            <v-text-field
+                                v-model="variable_fps_max"
+                                :label="$t('Timelapse.MaxFramerate')"
+                                type="number"
+                                outlined
+                                dense
+                                hide-details
+                                hide-spin-buttons
+                                class="mt-3" />
+                            <v-text-field
+                                v-model="targetlength"
+                                :label="$t('Timelapse.Targetlength')"
+                                type="number"
+                                outlined
+                                dense
+                                hide-details
+                                hide-spin-buttons
+                                class="mt-3" />
+                        </template>
+                        <v-text-field
+                            v-else
+                            v-model="output_framerate"
+                            :label="$t('Timelapse.Framerate')"
+                            type="number"
+                            outlined
+                            dense
+                            hide-details
+                            hide-spin-buttons />
+                        <v-text-field
+                            v-model="duplicatelastframe"
+                            :label="$t('Timelapse.DuplicateLastframe')"
+                            type="number"
+                            outlined
+                            dense
+                            hide-details
+                            hide-spin-buttons
+                            class="mt-3" />
+                    </v-col>
+                    <v-col class="col-4">
+                        <v-text-field
+                            v-if="variable_fps"
+                            v-model="variableTargetFps"
+                            :label="$t('Timelapse.TargetFps')"
+                            type="number"
+                            outlined
+                            dense
+                            hide-details
+                            readonly
+                            class="mb-3" />
+                        <v-text-field
+                            v-model="estimatedVideoLength"
+                            :label="$t('Timelapse.EstimatedLength')"
+                            outlined
+                            dense
+                            hide-details
+                            readonly />
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="close">{{ $t('Timelapse.Cancel') }}</v-btn>
+                <v-btn text color="primary" @click="startRender">{{ $t('Timelapse.StartRender') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import Panel from '@/components/ui/Panel.vue'
+import SettingsRow from '@/components/settings/SettingsRow.vue'
+import BaseMixin from '@/components/mixins/base'
+import TimelapseMixin from '@/components/mixins/timelapse'
+import { mdiCloseThick, mdiTextBoxSearchOutline } from '@mdi/js'
+
+@Component({
+    components: { Panel, SettingsRow },
+})
+export default class TimelapseRenderingsettingsDialog extends Mixins(BaseMixin, TimelapseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiTextBoxSearchOutline = mdiTextBoxSearchOutline
+
+    @Prop({ type: Boolean, default: false }) show!: boolean
+
+    get framerateTypeOptions() {
+        return [
+            { value: false, text: this.$t('Timelapse.Fixed') },
+            { value: true, text: this.$t('Timelapse.Variable') },
+        ]
+    }
+
+    startRender() {
+        this.$socket.emit('machine.timelapse.render', {})
+        this.close()
+    }
+
+    close() {
+        this.$emit('close')
+    }
+}
+</script>
diff --git a/src/components/inputs/Codemirror.vue b/src/components/inputs/Codemirror.vue
index 9c54459ec..232e675e5 100644
--- a/src/components/inputs/Codemirror.vue
+++ b/src/components/inputs/Codemirror.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="vue-codemirror">
-        <div ref="codemirror" v-observe-visibility="visibilityChanged"></div>
+        <div ref="editor" v-observe-visibility="visibilityChanged"></div>
     </div>
 </template>
 
 <script lang="ts">
-// Inspired by these repo: https://github.com/surmon-china/vue-codemirror
+// Inspired by this repo: https://github.com/surmon-china/vue-codemirror
 
-import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import { basicSetup } from 'codemirror'
 import { EditorView, keymap } from '@codemirror/view'
@@ -27,9 +27,7 @@ export default class Codemirror extends Mixins(BaseMixin) {
     private codemirror: null | EditorView = null
     private cminstance: null | EditorView = null
 
-    declare $refs: {
-        codemirror: HTMLElement
-    }
+    @Ref('editor') editor!: HTMLElement
 
     @Prop({ required: false, default: '' })
     declare readonly code: string
@@ -65,7 +63,7 @@ export default class Codemirror extends Mixins(BaseMixin) {
 
     initialize() {
         this.codemirror = new EditorView({
-            parent: this.$refs.codemirror,
+            parent: this.editor,
         })
         this.cminstance = this.codemirror
 
@@ -88,6 +86,10 @@ export default class Codemirror extends Mixins(BaseMixin) {
             indentUnit.of(' '.repeat(this.tabSize)),
             keymap.of([indentWithTab]),
             EditorView.updateListener.of((update) => {
+                if (update.selectionSet) {
+                    const line = this.cminstance?.state?.doc.lineAt(this.cminstance?.state?.selection.main.head).number
+                    this.$emit('lineChange', line)
+                }
                 this.content = update.state?.doc.toString()
                 if (this.$emit) {
                     this.$emit('input', this.content)
@@ -110,5 +112,15 @@ export default class Codemirror extends Mixins(BaseMixin) {
     get tabSize() {
         return this.$store.state.gui.editor.tabSize || 2
     }
+
+    gotoLine(line: number) {
+        const l = this.cminstance?.state?.doc.line(line)
+        if (!l) return
+
+        this.cminstance?.dispatch({
+            selection: { head: l.from, anchor: l.to },
+            scrollIntoView: true,
+        })
+    }
 }
 </script>
diff --git a/src/components/mixins/timelapse.ts b/src/components/mixins/timelapse.ts
new file mode 100644
index 000000000..c1ad6be45
--- /dev/null
+++ b/src/components/mixins/timelapse.ts
@@ -0,0 +1,78 @@
+import Component from 'vue-class-component'
+import Vue from 'vue'
+
+@Component
+export default class TimelapseMixin extends Vue {
+    get variable_fps() {
+        return this.$store.state.server.timelapse?.settings?.variable_fps ?? false
+    }
+
+    set variable_fps(newVal) {
+        this.$store.dispatch('server/timelapse/saveSetting', { variable_fps: newVal })
+    }
+
+    get variable_fps_min() {
+        return this.$store.state.server.timelapse?.settings?.variable_fps_min ?? 5
+    }
+
+    set variable_fps_min(newVal) {
+        this.$store.dispatch('server/timelapse/saveSetting', { variable_fps_min: newVal })
+    }
+
+    get variable_fps_max() {
+        return this.$store.state.server.timelapse?.settings?.variable_fps_max ?? 60
+    }
+
+    set variable_fps_max(newVal) {
+        this.$store.dispatch('server/timelapse/saveSetting', { variable_fps_max: newVal })
+    }
+
+    get targetlength() {
+        return this.$store.state.server.timelapse?.settings?.targetlength ?? 10
+    }
+
+    set targetlength(newVal) {
+        this.$store.dispatch('server/timelapse/saveSetting', { targetlength: newVal })
+    }
+
+    get output_framerate() {
+        return this.$store.state.server.timelapse?.settings?.output_framerate ?? 30
+    }
+
+    set output_framerate(newVal) {
+        this.$store.dispatch('server/timelapse/saveSetting', { output_framerate: newVal })
+    }
+
+    get duplicatelastframe() {
+        return this.$store.state.server.timelapse?.settings?.duplicatelastframe ?? 0
+    }
+
+    set duplicatelastframe(newVal) {
+        this.$store.dispatch('server/timelapse/saveSetting', { duplicatelastframe: newVal })
+    }
+
+    get framesCount() {
+        return this.$store.state.server.timelapse?.lastFrame?.count ?? 0
+    }
+
+    get estimatedVideoLength() {
+        let seconds = Math.round((this.framesCount + this.duplicatelastframe) / this.output_framerate)
+
+        if (this.variable_fps) {
+            seconds = Math.round((this.framesCount + this.duplicatelastframe) / this.variableTargetFps)
+            if (seconds < this.targetlength) seconds = this.targetlength
+        }
+
+        return seconds > 60
+            ? Math.floor(seconds / 60) + 'm ' + (seconds - Math.floor(seconds / 60) * 60) + 's'
+            : seconds + 's'
+    }
+
+    get variableTargetFps() {
+        let targetFps = Math.floor(this.framesCount / this.targetlength)
+        targetFps = Math.max(targetFps, this.variable_fps_min)
+        targetFps = Math.min(targetFps, this.variable_fps_max)
+
+        return targetFps
+    }
+}
diff --git a/src/components/panels/Extruder/ExtruderControlPanelControl.vue b/src/components/panels/Extruder/ExtruderControlPanelControl.vue
index fdb7a10a8..b430f68ab 100644
--- a/src/components/panels/Extruder/ExtruderControlPanelControl.vue
+++ b/src/components/panels/Extruder/ExtruderControlPanelControl.vue
@@ -93,7 +93,7 @@
                             <template #activator="{ on }">
                                 <div v-on="on">
                                     <v-btn
-                                        :loading="loadings.includes('btnDetract')"
+                                        :loading="loadings.includes('btnExtrude')"
                                         :disabled="!extrudePossible || tooLargeExtrusion || printerIsPrintingOnly"
                                         small
                                         class="_btn-extruder-cmd"
@@ -157,7 +157,7 @@
                                     <template #activator="{ on }">
                                         <div class="pt-1 pb-2 px-3" v-on="on">
                                             <v-btn
-                                                :loading="loadings.includes('btnDetract')"
+                                                :loading="loadings.includes('btnExtrude')"
                                                 :disabled="
                                                     !extrudePossible || tooLargeExtrusion || printerIsPrintingOnly
                                                 "
@@ -263,15 +263,22 @@ export default class ExtruderControlPanel extends Mixins(BaseMixin, ExtruderMixi
     }
 
     sendRetract(): void {
-        const gcode = `M83\nG1 E-${this.feedamount} F${this.feedrate * 60}`
-        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'btnRetract' })
+        this.sendCommand(this.feedamount * -1, 'btnRetract')
     }
 
     sendExtrude(): void {
-        const gcode = `M83\nG1 E${this.feedamount} F${this.feedrate * 60}`
+        this.sendCommand(this.feedamount, 'btnExtrude')
+    }
+
+    sendCommand(length: number, loading: string): void {
+        const gcode =
+            `SAVE_GCODE_STATE NAME=_ui_extrude\n` +
+            `M83\n` +
+            `G1 E${length} F${this.feedrate * 60}\n` +
+            `RESTORE_GCODE_STATE NAME=_ui_extrude`
+
         this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'btnDetract' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading })
     }
 }
 </script>
diff --git a/src/components/panels/MachineSettings/MachineSettingsPanel.vue b/src/components/panels/MachineSettings/MachineSettingsPanel.vue
deleted file mode 100644
index 8b2bdb823..000000000
--- a/src/components/panels/MachineSettings/MachineSettingsPanel.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <panel
-        v-if="klipperReadyForGui"
-        :icon="mdiEngine"
-        :title="$t('Panels.MachineSettingsPanel.Headline').toString()"
-        :collapsible="true"
-        card-class="machine-settings-panel">
-        <div>
-            <motion-settings></motion-settings>
-        </div>
-    </panel>
-</template>
-
-<script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
-import BaseMixin from '@/components/mixins/base'
-import Panel from '@/components/ui/Panel.vue'
-import SubPanel from '@/components/ui/SubPanel.vue'
-import MotionSettings from '@/components/panels/MachineSettings/MotionSettings.vue'
-import { mdiEngine } from '@mdi/js'
-
-@Component({
-    components: {
-        Panel,
-        SubPanel,
-        MotionSettings,
-    },
-})
-export default class MachineSettingsPanel extends Mixins(BaseMixin) {
-    mdiEngine = mdiEngine
-}
-</script>
diff --git a/src/components/panels/MachineSettings/MotionSettings.vue b/src/components/panels/MachineSettings/MotionSettings.vue
deleted file mode 100644
index 315290a08..000000000
--- a/src/components/panels/MachineSettings/MotionSettings.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-    <v-container>
-        <responsive
-            :breakpoints="{
-                small: (el) => el.width < 375,
-                medium: (el) => el.width >= 375,
-            }">
-            <template #default="{ el }">
-                <v-row>
-                    <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
-                        <number-input
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity')"
-                            param="VELOCITY"
-                            :target="velocity"
-                            :default-value="defaultVelocity"
-                            :output-error-msg="true"
-                            :has-spinner="true"
-                            :spinner-factor="5"
-                            :step="1"
-                            :min="1"
-                            :max="null"
-                            :dec="0"
-                            unit="mm/s"
-                            @submit="sendCmd" />
-                    </v-col>
-                    <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
-                        <number-input
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity')"
-                            param="SQUARE_CORNER_VELOCITY"
-                            :target="squareCornerVelocity"
-                            :default-value="defaultSquareCornerVelocity"
-                            :output-error-msg="true"
-                            :has-spinner="true"
-                            :step="0.1"
-                            :min="0.1"
-                            :max="null"
-                            :dec="1"
-                            unit="mm/s"
-                            @submit="sendCmd" />
-                    </v-col>
-                </v-row>
-                <v-row>
-                    <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
-                        <number-input
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration')"
-                            param="ACCEL"
-                            :target="accel"
-                            :default-value="defaultAccel"
-                            :output-error-msg="true"
-                            :has-spinner="true"
-                            :spinner-factor="100"
-                            :step="1"
-                            :min="1"
-                            :max="null"
-                            :dec="0"
-                            unit="mm/s²"
-                            @submit="sendCmd" />
-                    </v-col>
-                    <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
-                        <number-input
-                            v-if="minimumCruiseRatio === null"
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel')"
-                            param="ACCEL_TO_DECEL"
-                            :target="accelToDecel"
-                            :default-value="defaultAccelToDecel"
-                            :output-error-msg="true"
-                            :has-spinner="true"
-                            :spinner-factor="100"
-                            :step="1"
-                            :min="1"
-                            :max="null"
-                            :dec="0"
-                            unit="mm/s²"
-                            @submit="sendCmd" />
-                        <number-input
-                            v-else
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.MinimumCruiseRatio')"
-                            param="MINIMUM_CRUISE_RATIO"
-                            :target="minimumCruiseRatio"
-                            :default-value="defaultMinimumCruiseRatio"
-                            :output-error-msg="true"
-                            :has-spinner="true"
-                            :spinner-factor="5"
-                            :step="0.01"
-                            :min="0.0"
-                            :max="0.99"
-                            :dec="2"
-                            @submit="sendCmd" />
-                    </v-col>
-                </v-row>
-            </template>
-        </responsive>
-    </v-container>
-</template>
-
-<script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
-import { Debounce } from 'vue-debounce-decorator'
-import BaseMixin from '@/components/mixins/base'
-import Panel from '@/components/ui/Panel.vue'
-import NumberInput from '@/components/inputs/NumberInput.vue'
-import Responsive from '@/components/ui/Responsive.vue'
-
-@Component({
-    components: { Panel, NumberInput, Responsive },
-})
-export default class MotionSettings extends Mixins(BaseMixin) {
-    get velocity(): number {
-        return Math.trunc(this.$store.state.printer?.toolhead?.max_velocity ?? 300)
-    }
-
-    get accel(): number {
-        return Math.trunc(this.$store.state.printer?.toolhead?.max_accel ?? 3000)
-    }
-
-    get accelToDecel(): number {
-        return Math.trunc(this.$store.state.printer?.toolhead?.max_accel_to_decel ?? this.accel / 2)
-    }
-
-    get minimumCruiseRatio(): number | null {
-        const value = this.$store.state.printer?.toolhead?.minimum_cruise_ratio ?? null
-
-        if (value === null) return null
-
-        return Math.round(value * 100) / 100
-    }
-
-    get squareCornerVelocity(): number {
-        return Math.floor((this.$store.state.printer?.toolhead?.square_corner_velocity ?? 8) * 10) / 10
-    }
-
-    get defaultVelocity(): number {
-        return Math.trunc(this.$store.state.printer?.configfile?.settings?.printer?.max_velocity ?? 300)
-    }
-
-    get defaultAccel(): number {
-        return Math.trunc(this.$store.state.printer?.configfile?.settings?.printer?.max_accel ?? 3000)
-    }
-
-    get defaultAccelToDecel(): number {
-        return Math.trunc(this.$store.state.printer?.configfile?.settings?.printer?.max_accel_to_decel ?? 1500)
-    }
-
-    get defaultMinimumCruiseRatio(): number {
-        const value = this.$store.state.printer?.configfile?.settings?.printer?.minimum_cruise_ratio ?? 0.5
-
-        return Math.round(value / 10) * 10
-    }
-
-    get defaultSquareCornerVelocity(): number {
-        const value = this.$store.state.printer?.configfile?.settings?.printer?.square_corner_velocity ?? 8
-
-        return Math.floor(value * 10) / 10
-    }
-
-    @Debounce(500)
-    sendCmd(params: { name: string; value: number }): void {
-        const gcode = `SET_VELOCITY_LIMIT ${params.name}=${params.value}`
-
-        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: gcode })
-    }
-}
-</script>
diff --git a/src/components/panels/MachineSettingsPanel.vue b/src/components/panels/MachineSettingsPanel.vue
new file mode 100644
index 000000000..73319a34a
--- /dev/null
+++ b/src/components/panels/MachineSettingsPanel.vue
@@ -0,0 +1,193 @@
+<template>
+    <panel
+        v-if="klipperReadyForGui"
+        :icon="mdiEngine"
+        :title="$t('Panels.MachineSettingsPanel.Headline')"
+        :collapsible="true"
+        card-class="machine-settings-panel">
+        <responsive
+            :breakpoints="{
+                small: (el) => el.width < 375,
+                medium: (el) => el.width >= 375,
+            }">
+            <template #default="{ el }">
+                <v-card-text class="pt-5">
+                    <v-row>
+                        <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
+                            <number-input
+                                :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity')"
+                                param="VELOCITY"
+                                :target="velocity"
+                                :default-value="defaultVelocity"
+                                :output-error-msg="true"
+                                :has-spinner="true"
+                                :spinner-factor="5"
+                                :step="1"
+                                :min="1"
+                                :max="null"
+                                :dec="0"
+                                unit="mm/s"
+                                @submit="sendCmd" />
+                        </v-col>
+                        <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
+                            <number-input
+                                :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity')"
+                                param="SQUARE_CORNER_VELOCITY"
+                                :target="squareCornerVelocity"
+                                :default-value="defaultSquareCornerVelocity"
+                                :output-error-msg="true"
+                                :has-spinner="true"
+                                :step="0.1"
+                                :min="0.1"
+                                :max="null"
+                                :dec="1"
+                                unit="mm/s"
+                                @submit="sendCmd" />
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
+                            <number-input
+                                :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration')"
+                                param="ACCEL"
+                                :target="accel"
+                                :default-value="defaultAccel"
+                                :output-error-msg="true"
+                                :has-spinner="true"
+                                :spinner-factor="100"
+                                :step="1"
+                                :min="1"
+                                :max="null"
+                                :dec="0"
+                                unit="mm/s²"
+                                @submit="sendCmd" />
+                        </v-col>
+                        <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
+                            <number-input
+                                v-if="minimumCruiseRatio === null"
+                                :label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel')"
+                                param="ACCEL_TO_DECEL"
+                                :target="accelToDecel"
+                                :default-value="defaultAccelToDecel"
+                                :output-error-msg="true"
+                                :has-spinner="true"
+                                :spinner-factor="100"
+                                :step="1"
+                                :min="1"
+                                :max="null"
+                                :dec="0"
+                                unit="mm/s²"
+                                @submit="sendCmd" />
+                            <number-input
+                                v-else
+                                :label="$t('Panels.MachineSettingsPanel.MotionSettings.MinimumCruiseRatio')"
+                                param="MINIMUM_CRUISE_RATIO"
+                                :target="minimumCruiseRatio"
+                                :default-value="defaultMinimumCruiseRatio"
+                                :output-error-msg="true"
+                                :has-spinner="true"
+                                :spinner-factor="5"
+                                :step="1"
+                                :min="0"
+                                :max="99"
+                                :dec="0"
+                                unit="%"
+                                @submit="sendCruiseRatioCmd" />
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </template>
+        </responsive>
+    </panel>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiEngine } from '@mdi/js'
+import { Debounce } from 'vue-debounce-decorator'
+import NumberInput from '@/components/inputs/NumberInput.vue'
+import Responsive from '@/components/ui/Responsive.vue'
+
+@Component({
+    components: {
+        NumberInput,
+        Panel,
+        Responsive,
+    },
+})
+export default class MachineSettingsPanel extends Mixins(BaseMixin) {
+    mdiEngine = mdiEngine
+
+    get toolhead() {
+        return this.$store.state.printer?.toolhead ?? {}
+    }
+
+    get configPrinter() {
+        return this.$store.state.printer?.configfile?.settings?.printer ?? {}
+    }
+
+    get velocity(): number {
+        return Math.trunc(this.toolhead.max_velocity ?? 300)
+    }
+
+    get accel(): number {
+        return Math.trunc(this.toolhead.max_accel ?? 3000)
+    }
+
+    get accelToDecel(): number {
+        return Math.trunc(this.toolhead.max_accel_to_decel ?? this.accel / 2)
+    }
+
+    get minimumCruiseRatio(): number | null {
+        const value = this.toolhead.minimum_cruise_ratio ?? null
+
+        if (value === null) return null
+
+        return Math.round(value * 100)
+    }
+
+    get squareCornerVelocity(): number {
+        return Math.floor((this.toolhead.square_corner_velocity ?? 8) * 10) / 10
+    }
+
+    get defaultVelocity(): number {
+        return Math.trunc(this.configPrinter.max_velocity ?? 300)
+    }
+
+    get defaultAccel(): number {
+        return Math.trunc(this.configPrinter.max_accel ?? 3000)
+    }
+
+    get defaultAccelToDecel(): number {
+        return Math.trunc(this.configPrinter.max_accel_to_decel ?? 1500)
+    }
+
+    get defaultMinimumCruiseRatio(): number {
+        const value = this.configPrinter.minimum_cruise_ratio ?? 0.5
+
+        return Math.round(value * 100)
+    }
+
+    get defaultSquareCornerVelocity(): number {
+        const value = this.configPrinter.square_corner_velocity ?? 8
+
+        return Math.floor(value * 10) / 10
+    }
+
+    sendCruiseRatioCmd(params: { name: string; value: number }): void {
+        params.value = params.value / 100
+
+        this.sendCmd(params)
+    }
+
+    @Debounce(500)
+    sendCmd(params: { name: string; value: number }): void {
+        const gcode = `SET_VELOCITY_LIMIT ${params.name}=${params.value}`
+
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode })
+    }
+}
+</script>
diff --git a/src/components/panels/MiniconsolePanel.vue b/src/components/panels/MiniconsolePanel.vue
index 1c5d0daf3..8a5168dc6 100644
--- a/src/components/panels/MiniconsolePanel.vue
+++ b/src/components/panels/MiniconsolePanel.vue
@@ -50,6 +50,13 @@
                             :label="filter.name"
                             @change="toggleFilter(filter)" />
                     </v-list-item>
+                    <v-list-item class="minHeight36">
+                        <v-checkbox
+                            v-model="rawOutput"
+                            class="mt-0"
+                            hide-details
+                            :label="$t('Panels.MiniconsolePanel.RawOutput')" />
+                    </v-list-item>
                 </v-list>
             </v-menu>
         </template>
@@ -204,6 +211,14 @@ export default class MiniconsolePanel extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'console.autoscroll', value: newVal })
     }
 
+    get rawOutput(): boolean {
+        return this.$store.state.gui.console.rawOutput ?? false
+    }
+
+    set rawOutput(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'console.rawOutput', value: newVal })
+    }
+
     commandClick(msg: string): void {
         this.gcode = msg
 
diff --git a/src/components/panels/Status/ExcludeObjectDialogMap.vue b/src/components/panels/Status/ExcludeObjectDialogMap.vue
index 2a5a18dcb..b004817f4 100644
--- a/src/components/panels/Status/ExcludeObjectDialogMap.vue
+++ b/src/components/panels/Status/ExcludeObjectDialogMap.vue
@@ -62,8 +62,8 @@
                         hoverName === object.name
                             ? primaryColor
                             : excluded_objects.includes(object.name)
-                            ? '#6668'
-                            : '#bbb'
+                              ? '#6668'
+                              : '#bbb'
                     "
                     @mouseover="showObjectTooltip(object.name)"
                     @mouseout="hideObjectTooltip"
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index ba405f501..d0a3833bb 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -110,6 +110,10 @@
                 </v-tab-item>
             </v-tabs-items>
         </panel>
+        <cancel-job-dialog
+            :show-dialog="showCancelJobDialog"
+            @cancel-job="cancelJob"
+            @close="showCancelJobDialog = false" />
     </div>
 </template>
 
@@ -141,9 +145,11 @@ import {
     mdiDotsVertical,
 } from '@mdi/js'
 import { PrinterStateMacro } from '@/store/printer/types'
+import CancelJobDialog from '@/components/dialogs/CancelJobDialog.vue'
 
 @Component({
     components: {
+        CancelJobDialog,
         KlippyStatePanel,
         MinSettingsPanel,
         Panel,
@@ -166,6 +172,7 @@ export default class StatusPanel extends Mixins(BaseMixin) {
         bigThumbnail: any
     }
 
+    showCancelJobDialog = false
     boolShowObjects = false
     boolShowPauseAtLayer = false
 
@@ -392,6 +399,17 @@ export default class StatusPanel extends Mixins(BaseMixin) {
     }
 
     btnCancelJob() {
+        const confirmOnCancelJob = this.$store.state.gui.uiSettings.confirmOnCancelJob
+        if (confirmOnCancelJob) {
+            this.showCancelJobDialog = true
+            return
+        }
+
+        this.cancelJob()
+    }
+
+    cancelJob() {
+        this.showCancelJobDialog = false
         this.$socket.emit('printer.print.cancel', {}, { loading: 'statusPrintCancel' })
     }
 
diff --git a/src/components/panels/Timelapse/TimelapseStatusPanel.vue b/src/components/panels/Timelapse/TimelapseStatusPanel.vue
index 2129fc85c..29a3ca7d3 100644
--- a/src/components/panels/Timelapse/TimelapseStatusPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseStatusPanel.vue
@@ -1,223 +1,100 @@
-<style scoped></style>
-
 <template>
-    <div>
-        <v-card class="mb-3">
-            <v-toolbar flat dense>
-                <v-toolbar-title>
-                    <span class="subheading align-baseline">
-                        <v-icon left>{{ mdiInformation }}</v-icon>
-                        {{ $t('Timelapse.Status') }}
-                    </span>
-                </v-toolbar-title>
-            </v-toolbar>
-            <v-row no-gutters>
-                <v-col class="col-12 col-sm-6 col-md-12 pb-3 pb-md-0 text--secondary">
-                    <v-card-text v-if="frameUrl" class="pb-0">
+    <panel :title="$t('Timelapse.Status')" :icon="mdiInformation" card-class="timelapse-status-panel">
+        <v-card-text v-if="framesCount">
+            <v-row v-if="frameUrl">
+                <v-col class="pb-0">
+                    <vue-load-image class="d-flex align-center justify-center">
+                        <img
+                            ref="timelapsePreview"
+                            slot="image"
+                            :src="frameUrl"
+                            :alt="$t('Timelapse.Preview').toString()"
+                            class="w-100"
+                            :style="webcamStyle"
+                            @load="calcRatio" />
+                        <div slot="preloader">
+                            <v-progress-circular indeterminate color="primary" />
+                        </div>
+                        <div slot="error">
+                            <v-icon>{{ mdiFile }}</v-icon>
+                        </div>
+                    </vue-load-image>
+                </v-col>
+            </v-row>
+            <v-row>
+                <v-col class="text--secondary">
+                    <settings-row :title="$t('Timelapse.Frames')" :dynamic-slot-width="true">
+                        {{ framesCount }}
+                    </settings-row>
+                    <v-divider class="my-2" />
+                    <settings-row :title="$t('Timelapse.EstimatedLength')" :dynamic-slot-width="true">
+                        {{ estimatedVideoLength }}
+                    </settings-row>
+                    <template v-if="!['printing', 'paused'].includes(printer_state)">
+                        <v-divider class="mt-2 mb-4" />
                         <v-row>
-                            <v-col>
-                                <vue-load-image>
-                                    <img
-                                        ref="timelapsePreview"
-                                        slot="image"
-                                        :src="frameUrl"
-                                        :alt="$t('Timelapse.Preview')"
-                                        class="w-100"
-                                        :style="webcamStyle"
-                                        @load="calcRatio" />
-                                    <div slot="preloader">
-                                        <v-progress-circular indeterminate color="primary"></v-progress-circular>
-                                    </div>
-                                    <div slot="error">
-                                        <v-icon>{{ mdiFile }}</v-icon>
-                                    </div>
-                                </vue-load-image>
+                            <v-col class="text-center py-1">
+                                <v-btn
+                                    text
+                                    color="primary"
+                                    :disabled="disableRenderButton"
+                                    @click="boolDialogRendersettings = true">
+                                    {{ $t('Timelapse.Render') }}
+                                </v-btn>
+                                <v-btn
+                                    text
+                                    color="primary"
+                                    :loading="loadings.includes('timelapse_saveframes')"
+                                    @click="saveFrames">
+                                    {{ $t('Timelapse.SaveFrames') }}
+                                </v-btn>
                             </v-col>
                         </v-row>
-                    </v-card-text>
-                </v-col>
-                <v-col
-                    v-if="framesCount > 0"
-                    class="col-12 col-sm-6 col-md-12 pt-3 pt-md-0 text--secondary"
-                    align-self="center">
-                    <v-card-text :class="framesCount ? 'pt-0' : ''">
-                        <template v-if="framesCount > 0">
-                            <settings-row :title="$t('Timelapse.Frames').toString()">
-                                {{ framesCount }}
-                            </settings-row>
-                            <v-divider class="my-2"></v-divider>
-                            <settings-row
-                                :title="$t('Timelapse.EstimatedLength').toString()"
-                                :dynamic-slot-width="true">
-                                {{ estimatedVideoLength }}
-                            </settings-row>
-                        </template>
-                        <template v-if="['printing', 'paused'].includes(printer_state)">
-                            <v-divider class="my-2"></v-divider>
-                            <settings-row :title="$t('Timelapse.Enabled').toString()" :dynamic-slot-width="true">
-                                <v-switch v-model="enabled" hide-details class="mt-0"></v-switch>
-                            </settings-row>
-                            <template v-if="enabled">
-                                <v-divider v-if="framesCount > 0" class="my-2"></v-divider>
-                                <settings-row :title="$t('Timelapse.Autorender').toString()" :dynamic-slot-width="true">
-                                    <v-switch v-model="autorender" hide-details class="mt-0"></v-switch>
-                                </settings-row>
-                            </template>
-                        </template>
-                        <template v-if="framesCount > 0 && !['printing', 'paused'].includes(printer_state)">
-                            <v-divider class="mt-2 mb-4"></v-divider>
-                            <v-row>
-                                <v-col class="text-center">
-                                    <v-btn
-                                        text
-                                        color="primary"
-                                        :disabled="disableRenderButton"
-                                        @click="boolDialogRendersettings = true">
-                                        {{ $t('Timelapse.Render') }}
-                                    </v-btn>
-                                    <v-btn
-                                        text
-                                        color="primary"
-                                        :loading="loadings.includes('timelapse_saveframes')"
-                                        @click="saveFrames">
-                                        {{ $t('Timelapse.SaveFrames') }}
-                                    </v-btn>
-                                </v-col>
-                            </v-row>
-                        </template>
-                    </v-card-text>
-                </v-col>
-                <v-col v-else class="col-12 text--secondary" align-self="center">
-                    <v-card-text class="pt-0 pt-md-3">
-                        <p class="text-center my-0 font-italic">{{ $t('Timelapse.NoActiveTimelapse') }}</p>
-                    </v-card-text>
+                    </template>
                 </v-col>
             </v-row>
-        </v-card>
-        <v-dialog v-model="boolDialogRendersettings" :max-width="700" :max-height="500">
-            <panel
-                :title="$t('Timelapse.RenderSettings').toString()"
-                :icon="mdiTextBoxSearchOutline"
-                card-class="timelapse-rendersettings-dialog"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon @click="boolDialogRendersettings = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text class="">
-                    <v-row>
-                        <v-col class="col-4">
-                            <v-select
-                                v-model="variable_fps"
-                                :label="$t('Timelapse.Type')"
-                                :items="framerateTypeOptions"
-                                outlined
-                                dense
-                                hide-details></v-select>
-                        </v-col>
-                        <v-col class="col-4">
-                            <template v-if="variable_fps">
-                                <v-text-field
-                                    v-model="variable_fps_min"
-                                    :label="$t('Timelapse.MinFramerate')"
-                                    type="number"
-                                    outlined
-                                    dense
-                                    hide-details
-                                    hide-spin-buttons></v-text-field>
-                                <v-text-field
-                                    v-model="variable_fps_max"
-                                    :label="$t('Timelapse.MaxFramerate')"
-                                    type="number"
-                                    outlined
-                                    dense
-                                    hide-details
-                                    hide-spin-buttons
-                                    class="mt-3"></v-text-field>
-                                <v-text-field
-                                    v-model="targetlength"
-                                    :label="$t('Timelapse.Targetlength')"
-                                    type="number"
-                                    outlined
-                                    dense
-                                    hide-details
-                                    hide-spin-buttons
-                                    class="mt-3"></v-text-field>
-                            </template>
-                            <template v-else>
-                                <v-text-field
-                                    v-model="output_framerate"
-                                    :label="$t('Timelapse.Framerate')"
-                                    type="number"
-                                    outlined
-                                    dense
-                                    hide-details
-                                    hide-spin-buttons></v-text-field>
-                            </template>
-                            <v-text-field
-                                v-model="duplicatelastframe"
-                                :label="$t('Timelapse.DuplicateLastframe')"
-                                type="number"
-                                outlined
-                                dense
-                                hide-details
-                                hide-spin-buttons
-                                class="mt-3"></v-text-field>
-                        </v-col>
-                        <v-col class="col-4">
-                            <template v-if="variable_fps">
-                                <v-text-field
-                                    v-model="variableTargetFps"
-                                    :label="$t('Timelapse.TargetFps')"
-                                    type="number"
-                                    outlined
-                                    dense
-                                    hide-details
-                                    readonly
-                                    class="mb-3"></v-text-field>
-                            </template>
-                            <v-text-field
-                                v-model="estimatedVideoLength"
-                                :label="$t('Timelapse.EstimatedLength')"
-                                outlined
-                                dense
-                                hide-details
-                                readonly></v-text-field>
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn text @click="boolDialogRendersettings = false">{{ $t('Timelapse.Cancel') }}</v-btn>
-                    <v-btn text color="primary" @click="startRender">{{ $t('Timelapse.StartRender') }}</v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
-    </div>
+        </v-card-text>
+        <v-card-text v-else class="">
+            <p class="text-center my-0 font-italic">{{ $t('Timelapse.NoActiveTimelapse') }}</p>
+        </v-card-text>
+        <v-card-text v-if="['printing', 'paused'].includes(printer_state)" class="pt-0">
+            <v-divider class="mt-0 mb-2" />
+            <settings-row :title="$t('Timelapse.Enabled')" :dynamic-slot-width="true">
+                <v-switch v-model="enabled" hide-details class="mt-0" />
+            </settings-row>
+            <template v-if="enabled">
+                <v-divider class="my-2" />
+                <settings-row :title="$t('Timelapse.Autorender')" :dynamic-slot-width="true">
+                    <v-switch v-model="autorender" hide-details class="mt-0" />
+                </settings-row>
+            </template>
+        </v-card-text>
+        <timelapse-renderingsettings-dialog
+            :show="boolDialogRendersettings"
+            @close="boolDialogRendersettings = false" />
+    </panel>
 </template>
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Ref } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import Panel from '@/components/ui/Panel.vue'
-import { mdiFile, mdiInformation, mdiTextBoxSearchOutline, mdiCloseThick } from '@mdi/js'
+import { mdiFile, mdiInformation, mdiCloseThick } from '@mdi/js'
 import WebcamMixin from '@/components/mixins/webcam'
+import TimelapseRenderingsettingsDialog from '@/components/dialogs/TimelapseRenderingsettingsDialog.vue'
+import TimelapseMixin from '@/components/mixins/timelapse'
 @Component({
-    components: { Panel, SettingsRow },
+    components: { TimelapseRenderingsettingsDialog, Panel, SettingsRow },
 })
-export default class TimelapseStatusPanel extends Mixins(BaseMixin, WebcamMixin) {
+export default class TimelapseStatusPanel extends Mixins(BaseMixin, TimelapseMixin, WebcamMixin) {
     mdiInformation = mdiInformation
     mdiFile = mdiFile
     mdiCloseThick = mdiCloseThick
-    mdiTextBoxSearchOutline = mdiTextBoxSearchOutline
 
-    private boolDialogRendersettings = false
-    private scale = 1
+    boolDialogRendersettings = false
+    scale = 1
 
-    declare $refs: {
-        timelapsePreview: HTMLImageElement
-    }
+    @Ref('timelapsePreview') timelapsePreview!: HTMLImageElement
 
     get frameUrl() {
         const frame = this.$store.state.server.timelapse?.lastFrame?.file ?? null
@@ -229,10 +106,6 @@ export default class TimelapseStatusPanel extends Mixins(BaseMixin, WebcamMixin)
         return null
     }
 
-    get framesCount() {
-        return this.$store.state.server.timelapse?.lastFrame?.count ?? 0
-    }
-
     get enabled() {
         return this.$store.state.server.timelapse?.settings?.enabled ?? false
     }
@@ -257,90 +130,16 @@ export default class TimelapseStatusPanel extends Mixins(BaseMixin, WebcamMixin)
         )
     }
 
-    get variable_fps() {
-        return this.$store.state.server.timelapse?.settings?.variable_fps ?? false
-    }
-
-    set variable_fps(newVal) {
-        this.$store.dispatch('server/timelapse/saveSetting', { variable_fps: newVal })
-    }
-
-    get framerateTypeOptions() {
-        return [
-            {
-                value: false,
-                text: this.$t('Timelapse.Fixed'),
-            },
-            {
-                value: true,
-                text: this.$t('Timelapse.Variable'),
-            },
-        ]
-    }
-
-    get variable_fps_min() {
-        return this.$store.state.server.timelapse?.settings?.variable_fps_min ?? 5
-    }
-
-    set variable_fps_min(newVal) {
-        this.$store.dispatch('server/timelapse/saveSetting', { variable_fps_min: newVal })
-    }
-
-    get variable_fps_max() {
-        return this.$store.state.server.timelapse?.settings?.variable_fps_max ?? 60
-    }
-
-    set variable_fps_max(newVal) {
-        this.$store.dispatch('server/timelapse/saveSetting', { variable_fps_max: newVal })
-    }
-
-    get targetlength() {
-        return this.$store.state.server.timelapse?.settings?.targetlength ?? 10
-    }
-
-    set targetlength(newVal) {
-        this.$store.dispatch('server/timelapse/saveSetting', { targetlength: newVal })
-    }
-
-    get output_framerate() {
-        return this.$store.state.server.timelapse?.settings?.output_framerate ?? 30
-    }
-
-    set output_framerate(newVal) {
-        this.$store.dispatch('server/timelapse/saveSetting', { output_framerate: newVal })
-    }
-
-    get duplicatelastframe() {
-        return this.$store.state.server.timelapse?.settings?.duplicatelastframe ?? 0
-    }
-
-    set duplicatelastframe(newVal) {
-        this.$store.dispatch('server/timelapse/saveSetting', { duplicatelastframe: newVal })
+    get disableRenderButton() {
+        return (this.$store.state.server.timelapse?.rendering.status ?? '') === 'running'
     }
 
-    get estimatedVideoLength() {
-        let seconds = Math.round((this.framesCount + this.duplicatelastframe) / this.output_framerate)
-
-        if (this.variable_fps) {
-            seconds = Math.round((this.framesCount + this.duplicatelastframe) / this.variableTargetFps)
-            if (seconds < this.targetlength) seconds = this.targetlength
-        }
-
-        return seconds > 60
-            ? Math.floor(seconds / 60) + 'm ' + (seconds - Math.floor(seconds / 60) * 60) + 's'
-            : seconds + 's'
+    get existsSnapshoturlInMoonrakerConfig() {
+        return 'snapshoturl' in this.$store.state.server.config.orig.timelapse
     }
 
-    get variableTargetFps() {
-        let targetFps = Math.floor(this.framesCount / this.targetlength)
-        targetFps = Math.max(targetFps, this.variable_fps_min)
-        targetFps = Math.min(targetFps, this.variable_fps_max)
-
-        return targetFps
-    }
-
-    get disableRenderButton() {
-        return (this.$store.state.server.timelapse?.rendering.status ?? '') === 'running'
+    get moonrakerTimelapseConfig() {
+        return this.$store.state.server.config.config.timelapse ?? {}
     }
 
     get camId() {
@@ -352,6 +151,20 @@ export default class TimelapseStatusPanel extends Mixins(BaseMixin, WebcamMixin)
     }
 
     get webcamStyle() {
+        // if the snapshoturl is set in moonraker config,
+        // we also use the flip_x and flip_y values from the moonraker config
+        if (this.existsSnapshoturlInMoonrakerConfig) {
+            return {
+                transform: this.generateTransform(
+                    this.moonrakerTimelapseConfig.flip_x ?? false,
+                    this.moonrakerTimelapseConfig.flip_y ?? false,
+                    0
+                ),
+            }
+        }
+
+        if (!this.camSettings) return {}
+
         return {
             transform: this.generateTransform(
                 this.camSettings.flip_horizontal ?? false,
@@ -361,22 +174,15 @@ export default class TimelapseStatusPanel extends Mixins(BaseMixin, WebcamMixin)
         }
     }
 
-    startRender() {
-        this.boolDialogRendersettings = false
-
-        this.$socket.emit('machine.timelapse.render', {})
-    }
-
     saveFrames() {
         this.$socket.emit('machine.timelapse.saveframes', {}, { loading: 'timelapse_saveframes' })
     }
 
     calcRatio() {
-        if (this.$refs.timelapsePreview) {
-            this.scale = this.$refs.timelapsePreview.naturalHeight / this.$refs.timelapsePreview.naturalWidth
-            if (this.scale > 1) {
-                this.scale = this.$refs.timelapsePreview.naturalWidth / this.$refs.timelapsePreview.naturalHeight
-            }
+        this.scale = this.timelapsePreview.naturalHeight / this.timelapsePreview.naturalWidth
+
+        if (this.scale > 1) {
+            this.scale = this.timelapsePreview.naturalWidth / this.timelapsePreview.naturalHeight
         }
     }
 }
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index 0bc26e456..14bb0f33e 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -178,6 +178,13 @@
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
+                <settings-row
+                    :title="$t('Settings.UiSettingsTab.ConfirmOnCancelJob')"
+                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnCancelJobDescription')"
+                    :dynamic-slot-width="true">
+                    <v-switch v-model="confirmOnCancelJob" hide-details class="mt-0" />
+                </settings-row>
+                <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.UiSettingsTab.NavigationStyle')"
                     :sub-title="$t('Settings.UiSettingsTab.NavigationStyleDescription')">
@@ -426,6 +433,14 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin, ThemeMixin)
         this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.confirmOnPowerDeviceChange', value: newVal })
     }
 
+    get confirmOnCancelJob() {
+        return this.$store.state.gui.uiSettings.confirmOnCancelJob
+    }
+
+    set confirmOnCancelJob(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.confirmOnCancelJob', value: newVal })
+    }
+
     get lockSliders() {
         return this.$store.state.gui.uiSettings.lockSlidersOnTouchDevices
     }
diff --git a/src/components/webcams/WebcamWrapperItem.vue b/src/components/webcams/WebcamWrapperItem.vue
index d0931ad00..caf299a05 100644
--- a/src/components/webcams/WebcamWrapperItem.vue
+++ b/src/components/webcams/WebcamWrapperItem.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <template v-if="service === 'mjpegstreamer'">
-            <mjpegstreamer-async :cam-settings="webcam" :show-fps="showFps" :printer-url="printerUrl" />
+            <mjpegstreamer-async :cam-settings="webcam" :show-fps="showFps" :printer-url="printerUrl" :page="page" />
         </template>
         <template v-else-if="service === 'mjpegstreamer-adaptive'">
             <mjpegstreamer-adaptive-async :cam-settings="webcam" :show-fps="showFps" :printer-url="printerUrl" />
diff --git a/src/components/webcams/streamers/Mjpegstreamer.vue b/src/components/webcams/streamers/Mjpegstreamer.vue
index d42ecf78d..03706b94a 100644
--- a/src/components/webcams/streamers/Mjpegstreamer.vue
+++ b/src/components/webcams/streamers/Mjpegstreamer.vue
@@ -1,47 +1,62 @@
 <template>
     <div style="position: relative" class="d-flex justify-center">
         <img
+            v-show="status === 'connected'"
             ref="image"
-            v-observe-visibility="viewportVisibilityChanged"
             class="webcamImage"
             :style="webcamStyle"
+            :alt="camSettings.name"
+            src="#"
             @load="onload" />
-        <span v-if="showFpsCounter" class="webcamFpsOutput">{{ $t('Panels.WebcamPanel.FPS') }}: {{ fpsOutput }}</span>
+        <span v-if="showFpsCounter && status === 'connected'" class="webcamFpsOutput">
+            {{ $t('Panels.WebcamPanel.FPS') }}: {{ fpsOutput }}
+        </span>
+        <v-row v-if="status !== 'connected'">
+            <v-col class="_webcam_mjpegstreamer_output text-center d-flex flex-column justify-center align-center">
+                <v-progress-circular v-if="status === 'connecting'" indeterminate color="primary" class="mb-3" />
+                <span class="mt-3">{{ statusMessage }}</span>
+            </v-col>
+        </v-row>
     </div>
 </template>
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { Mixins, Prop, Watch } from 'vue-property-decorator'
+import { Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 import WebcamMixin from '@/components/mixins/webcam'
 
 const CONTENT_LENGTH = 'content-length'
-const TYPE_JPEG = 'image/jpeg'
+
+const SOI = new Uint8Array(2)
+SOI[0] = 0xff
+SOI[1] = 0xd8
 
 @Component
 export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
-    private currentFPS = 0
-    private streamState = false
-    private aspectRatio: null | number = null
-    // eslint-disable-next-line no-undef
-    private timerFPS: NodeJS.Timeout | null = null
-    // eslint-disable-next-line no-undef
-    private timerRestart: NodeJS.Timeout | null = null
-    private stream: ReadableStream | null = null
-    private controller: AbortController | null = null
-    private isVisibleViewport = false
-    private isVisibleDocument = true
+    // current read stream frames counter
+    frames = 0
+    // current displayed fps
+    currentFPS = 0
+    status: string = 'connecting'
+    statusMessage: string = ''
+    streamState = false
+    aspectRatio: null | number = null
+    timerFPS: number | null = null
+    timerRestart: number | null = null
 
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
     @Prop({ default: null }) readonly printerUrl!: string | null
-
     @Prop({ default: true }) declare showFps: boolean
+    @Prop({ type: String, default: null }) readonly page!: string | null
 
-    declare $refs: {
-        canvas: HTMLCanvasElement
-        image: HTMLImageElement
+    @Ref('image') readonly image!: HTMLImageElement
+
+    private reader: ReadableStreamDefaultReader<Uint8Array> | null
+    constructor() {
+        super()
+        this.reader = null
     }
 
     get url() {
@@ -69,7 +84,7 @@ export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     get fpsOutput() {
-        return this.currentFPS < 10 ? '0' + this.currentFPS.toString() : this.currentFPS
+        return this.currentFPS.toString().padStart(2, '0')
     }
 
     get showFpsCounter() {
@@ -78,111 +93,176 @@ export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
         return !(this.camSettings.extra_data?.hideFps ?? false)
     }
 
-    startStream() {
-        if (this.streamState) return
+    get expanded(): boolean {
+        if (this.page !== 'dashboard') return true
+
+        return this.$store.getters['gui/getPanelExpand']('webcam-panel', this.viewport) ?? false
+    }
+
+    // start or stop the video when the expanded state changes
+    @Watch('expanded', { immediate: true })
+    expandChanged(newExpanded: boolean): void {
+        if (!newExpanded) {
+            this.stopStream()
+            return
+        }
+
+        this.startStream()
+    }
+
+    log(msg: string, obj?: any) {
+        if (obj) {
+            window.console.log(`[MJPEG streamer] ${msg}`, obj)
+            return
+        }
+
+        window.console.log(`[MJPEG streamer] ${msg}`)
+    }
+
+    getLength(headers: any) {
+        let contentLength = -1
+        headers.split('\n').forEach((header: any) => {
+            const pair = header.split(':')
+            if (pair[0].toLowerCase() === CONTENT_LENGTH) {
+                // Fix for issue https://github.com/aruntj/mjpeg-readable-stream/issues/3 suggested by martapanc
+                contentLength = pair[1]
+            }
+        })
+        return contentLength
+    }
+
+    async startStream(skipStatus: boolean = false) {
+        if (this.streamState) {
+            return
+        }
         this.streamState = true
 
-        const SOI = new Uint8Array(2)
-        SOI[0] = 0xff
-        SOI[1] = 0xd8
+        if (!skipStatus) {
+            this.status = 'connecting'
+            this.statusMessage = this.$t('Panels.WebcamPanel.ConnectingTo', { url: this.url }).toString()
+        }
+
+        // reset counter and timeout/interval
+        this.clearTimeouts()
 
-        function getLength(headers: any) {
-            let contentLength = -1
-            headers.split('\n').forEach((header: any) => {
-                const pair = header.split(':')
-                if (pair[0].toLowerCase() === CONTENT_LENGTH) {
-                    // Fix for issue https://github.com/aruntj/mjpeg-readable-stream/issues/3 suggested by martapanc
-                    contentLength = pair[1]
-                }
-            })
-            return contentLength
+        try {
+            //readable stream credit to from https://github.com/aruntj/mjpeg-readable-stream
+
+            const url = new URL(this.url)
+            url.searchParams.append('timestamp', new Date().getTime().toString())
+
+            let response: Response | null = await fetch(url.toString(), { mode: 'cors' })
+
+            if (!response.ok) {
+                this.log(`${response.status}: ${response.statusText}`)
+                await this.stopStream()
+                return
+            }
+
+            if (!response.body) {
+                this.log('ReadableStream not yet supported in this browser.')
+                await this.stopStream()
+                return
+            }
+
+            this.timerFPS = window.setInterval(() => {
+                this.currentFPS = this.frames
+                this.frames = 0
+            }, 1000)
+
+            this.timerRestart = window.setTimeout(() => {
+                this.restartStream(true)
+            }, 10000)
+
+            this.reader = response.body?.getReader()
+
+            await this.readStream()
+
+            // cleanup
+            this.reader = null
+            response = null
+        } catch (error: any) {
+            this.log(error.message)
+            this.status = 'error'
+            this.statusMessage = this.$t('Panels.WebcamPanel.ErrorWhileConnecting', { url: this.url }).toString()
+
+            this.timerRestart = window.setTimeout(() => {
+                this.restartStream()
+            }, 5000)
         }
+    }
+
+    async readStream() {
+        // stop if the stream is not ready
+        if (!this.reader) return
 
-        this.controller = new AbortController()
-        const { signal } = this.controller
-
-        //readable stream credit to from https://github.com/aruntj/mjpeg-readable-stream
-        fetch(this.url, { signal, mode: 'cors' })
-            .then((response) => response.body)
-            .then((rb) => {
-                const reader = rb?.getReader()
-
-                let headers = ''
-                let contentLength = -1
-                let imageBuffer: any = null
-                let bytesRead = 0
-                const img = this.$refs.image
-
-                // calculating fps. This is pretty lame. Should probably implement a floating window function.
-                let frames = 0
-
-                this.timerFPS = setInterval(() => {
-                    this.currentFPS = frames
-                    frames = 0
-                }, 1000)
-
-                this.timerRestart = setInterval(() => {
-                    this.restartStream()
-                }, 60000)
-
-                this.stream = new ReadableStream({
-                    start(controller) {
-                        // The following function handles each data chunk
-                        const pump = (): any => {
-                            // "done" is a Boolean and value a "Uint8Array"
-                            return reader?.read().then(({ done, value }) => {
-                                // If there is no more data to read
-                                if (done) {
-                                    controller.close()
-                                    return
-                                }
-                                // Get the data and send it to the browser via the controller
-                                controller.enqueue(value)
-
-                                if (value) {
-                                    for (let index = 0; index < value.length; index++) {
-                                        // we've found start of the frame. Everything we've read till now is the header.
-                                        if (value[index] === SOI[0] && value[index + 1] === SOI[1]) {
-                                            contentLength = getLength(headers)
-                                            imageBuffer = new Uint8Array(new ArrayBuffer(contentLength))
-                                        }
-                                        // we're still reading the header.
-                                        if (contentLength <= 0) {
-                                            headers += String.fromCharCode(value[index])
-                                        }
-                                        // we're now reading the jpeg.
-                                        else if (bytesRead < contentLength) {
-                                            imageBuffer[bytesRead++] = value[index]
-                                        }
-                                        // we're done reading the jpeg. Time to render it.
-                                        else {
-                                            if (img) {
-                                                img.src = URL.createObjectURL(
-                                                    new Blob([imageBuffer], { type: TYPE_JPEG })
-                                                )
-                                                img.onload = () => URL.revokeObjectURL(img.src)
-                                            }
-                                            frames++
-                                            contentLength = 0
-                                            bytesRead = 0
-                                            headers = ''
-                                        }
-                                    }
-                                }
-
-                                return pump()
-                            })
+        try {
+            // variables to read the stream
+            let headers = ''
+            let contentLength = -1
+            let imageBuffer: Uint8Array = new Uint8Array(0)
+            let bytesRead = 0
+            let skipFrame = false
+
+            let done: boolean | null = null
+            let value
+
+            do {
+                ;({ done, value } = await this.reader.read())
+
+                if (done || !value) continue
+
+                for (let index = 0; index < value.length; index++) {
+                    // we've found the start of the frame. Everything we've read till now is the header.
+                    if (value[index] === SOI[0] && value[index + 1] === SOI[1]) {
+                        contentLength = this.getLength(headers)
+                        imageBuffer = new Uint8Array(new ArrayBuffer(contentLength))
+                    }
+
+                    // we're still reading the header.
+                    if (contentLength <= 0) {
+                        headers += String.fromCharCode(value[index])
+                        continue
+                    }
+
+                    // we're now reading the jpeg.
+                    if (bytesRead < contentLength) {
+                        imageBuffer[bytesRead++] = value[index]
+                        continue
+                    }
+
+                    // we're done reading the jpeg. Time to render it.
+                    if (this.image && !skipFrame) {
+                        const objectURL = URL.createObjectURL(new Blob([imageBuffer], { type: 'image/jpeg' }))
+                        this.image.src = objectURL
+                        skipFrame = true
+
+                        // update status to 'connected' if the first frame is received
+                        if (this.status !== 'connected') {
+                            this.status = 'connected'
+                            this.statusMessage = ''
                         }
 
-                        return pump()
-                    },
-                })
-            })
+                        this.image.onload = () => {
+                            URL.revokeObjectURL(objectURL)
+                            skipFrame = false
+                        }
+                    }
+                    this.frames++
+                    contentLength = 0
+                    bytesRead = 0
+                    headers = ''
+                }
+            } while (!done)
+        } catch (error: any) {
+            this.log(`readStream error: ${error.message ?? ''}`, error)
+        } finally {
+            this.reader?.releaseLock()
+        }
     }
 
     mounted() {
         document.addEventListener('visibilitychange', this.documentVisibilityChanged)
-        this.startStream()
     }
 
     beforeDestroy() {
@@ -190,21 +270,42 @@ export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
         this.stopStream()
     }
 
-    stopStream() {
+    clearTimeouts() {
+        this.frames = 0
+        if (this.timerFPS) {
+            window.clearInterval(this.timerFPS)
+            this.timerFPS = null
+        }
+        if (this.timerRestart) {
+            window.clearTimeout(this.timerRestart)
+            this.timerRestart = null
+        }
+    }
+
+    async stopStream(skipStatus: boolean = false) {
         this.streamState = false
-        URL.revokeObjectURL(this.url)
-        if (this.timerFPS) clearTimeout(this.timerFPS)
-        if (this.timerRestart) clearTimeout(this.timerRestart)
-        this.controller?.abort()
-        this.stream?.cancel()
+
+        if (!skipStatus) {
+            this.status = 'disconnected'
+            this.statusMessage = this.$t('Panels.WebcamPanel.Disconnected').toString()
+        }
+        this.clearTimeouts()
+
+        try {
+            await this.reader?.cancel()
+            this.reader?.releaseLock()
+            this.reader = null
+        } catch (error) {
+            this.log('Error cancelling reader:', error)
+        }
     }
 
-    async restartStream() {
-        this.stopStream()
-        this.startStream()
+    async restartStream(skipStatus: boolean = false) {
+        await this.stopStream(skipStatus)
+        await this.startStream(skipStatus)
     }
 
-    @Watch('camSettings', { immediate: true, deep: true })
+    @Watch('camSettings', { deep: true })
     camSettingsChanged() {
         this.aspectRatio = null
         this.restartStream()
@@ -213,31 +314,24 @@ export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
     // this function check if you changed the browser tab
     documentVisibilityChanged() {
         const visibility = document.visibilityState
-        this.isVisibleDocument = visibility === 'visible'
-        if (!this.isVisibleDocument) this.stopStream()
-        this.visibilityChanged()
-    }
+        let bool = visibility === 'visible'
 
-    // this function checks if the webcam is in the viewport
-    viewportVisibilityChanged(newVal: boolean) {
-        this.isVisibleViewport = newVal
-        this.visibilityChanged()
-    }
+        if (this.page === 'dashboard' && !this.expanded) {
+            bool = false
+        }
 
-    // this function stops the stream on scroll or on collapse of the webcam panel
-    visibilityChanged() {
-        if (this.isVisibleViewport && this.isVisibleDocument) {
-            this.startStream()
+        if (!bool) {
+            this.stopStream()
             return
         }
 
-        this.stopStream()
+        this.startStream()
     }
 
     onload() {
-        if (this.aspectRatio !== null || !this.$refs.image) return
+        if (this.aspectRatio !== null || !this.image) return
 
-        this.aspectRatio = this.$refs.image.naturalWidth / this.$refs.image.naturalHeight
+        this.aspectRatio = this.image.naturalWidth / this.image.naturalHeight
     }
 }
 </script>
@@ -261,4 +355,8 @@ export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
 html.theme--light .webcamFpsOutput {
     background: rgba(255, 255, 255, 0.7);
 }
+
+._webcam_mjpegstreamer_output {
+    aspect-ratio: calc(3 / 2);
+}
 </style>
diff --git a/src/components/webcams/streamers/MjpegstreamerAdaptive.vue b/src/components/webcams/streamers/MjpegstreamerAdaptive.vue
index 39f04cc30..cac1ee5f8 100644
--- a/src/components/webcams/streamers/MjpegstreamerAdaptive.vue
+++ b/src/components/webcams/streamers/MjpegstreamerAdaptive.vue
@@ -1,55 +1,58 @@
 <template>
-    <div style="position: relative" class="d-flex justify-center">
-        <div v-if="!isLoaded" class="text-center py-5">
-            <v-progress-circular indeterminate color="primary" />
-        </div>
-        <canvas
+    <div v-observe-visibility="viewportVisibilityChanged" class="d-flex justify-center webcamBackground">
+        <img
+            v-show="status === 'connected'"
             ref="image"
-            v-observe-visibility="viewportVisibilityChanged"
-            width="600"
-            height="400"
+            class="webcamImage"
             :style="webcamStyle"
-            :class="'webcamImage ' + (isLoaded ? '' : 'hiddenWebcam')" />
-        <span v-if="isLoaded && showFpsCounter" class="webcamFpsOutput">
+            :alt="camSettings.name"
+            src="#"
+            @error="onError"
+            @load="onLoad" />
+        <span v-if="status === 'connected' && showFpsCounter" class="webcamFpsOutput">
             {{ $t('Panels.WebcamPanel.FPS') }}: {{ fpsOutput }}
         </span>
+        <v-row v-if="status !== 'connected'">
+            <v-col class="_webcam_mjpegstreamer_output text-center d-flex flex-column justify-center align-center">
+                <v-progress-circular v-if="status === 'connecting'" indeterminate color="primary" class="mb-3" />
+                <span class="mt-3">{{ statusMessage }}</span>
+            </v-col>
+        </v-row>
     </div>
 </template>
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { Mixins, Prop } from 'vue-property-decorator'
+import { Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
 export default class MjpegstreamerAdaptive extends Mixins(BaseMixin, WebcamMixin) {
-    private refresh = Math.ceil(Math.random() * Math.pow(10, 12))
-    private isVisible = true
-    private isVisibleDocument = true
-    private isVisibleViewport = false
-    private isLoaded = true
-    // eslint-disable-next-line no-undef
-    private timer: NodeJS.Timeout | undefined = undefined
-
-    private request_start_time = performance.now()
-    private start_time = performance.now()
-    private time = 0
-    private request_time = 0
-    private time_smoothing = 0.6
-    private request_time_smoothing = 0.1
-    private currentFPS = 0
-    private aspectRatio: null | number = null
-
-    declare $refs: {
-        image: any
-    }
+    isVisibleDocument = true
+    isVisibleViewport = false
+    status: string = 'connecting'
+    statusMessage: string = ''
+
+    timer: number | null = null
+    request_start_time = performance.now()
+    time = 0
+    request_time = 0
+    request_time_smoothing = 0.2
+
+    currentFPS: number | null = null
+    fpsTimer: number | null = null
+    frames = 0
+
+    aspectRatio: null | number = null
 
     @Prop({ required: true }) declare camSettings: GuiWebcamStateWebcam
     @Prop({ default: null }) readonly printerUrl!: string | null
     @Prop({ default: true }) declare showFps: boolean
 
+    @Ref('image') readonly image!: HTMLImageElement
+
     get webcamStyle() {
         const output = {
             transform: this.generateTransform(
@@ -67,10 +70,19 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin, WebcamMixin
             output.maxWidth = (window.innerHeight - 155) * this.aspectRatio + 'px'
         }
 
+        if (this.aspectRatio && [90, 270].includes(this.camSettings.rotation)) {
+            if (output.transform === 'none') output.transform = ''
+
+            const scale = 1 / this.aspectRatio
+            output.transform += ' rotate(' + this.camSettings.rotation + 'deg) scale(' + scale + ')'
+        }
+
         return output
     }
 
     get fpsOutput() {
+        if (this.currentFPS === null) return '--'
+
         return this.currentFPS < 10 ? '0' + this.currentFPS.toString() : this.currentFPS
     }
 
@@ -80,152 +92,161 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin, WebcamMixin
         return !(this.camSettings.extra_data?.hideFps ?? false)
     }
 
-    get rotate() {
-        return [90, 270].includes(this.camSettings.rotation ?? 0)
-    }
-
     get url() {
         return this.convertUrl(this.camSettings?.snapshot_url, this.printerUrl)
     }
 
-    refreshFrame() {
-        if (!this.isVisible) return
+    get isVisible() {
+        return this.isVisibleDocument && this.isVisibleViewport
+    }
 
-        this.refresh = new Date().getTime()
-        this.setFrame()
+    mounted() {
+        document.addEventListener('visibilitychange', this.documentVisibilityChanged)
     }
 
-    async setFrame() {
-        let url = new URL(this.url)
-        url.searchParams.append('bypassCache', this.refresh.toString())
+    beforeDestroy() {
+        document.removeEventListener('visibilitychange', this.documentVisibilityChanged)
+        this.stopStream()
+    }
 
-        this.request_start_time = performance.now()
-        this.currentFPS = this.time > 0 ? Math.round(1000 / this.time) : 0
-
-        let canvas = this.$refs.image
-        if (canvas) {
-            const ctx = canvas.getContext('2d')
-            const frame: any = await this.loadImage(url.toString())
-
-            this.aspectRatio = frame.naturalWidth / frame.naturalHeight
-            if (this.rotate) this.aspectRatio = 1 / this.aspectRatio
-
-            // set canvas sizes
-            canvas.width = canvas.clientWidth
-            canvas.height = canvas.clientWidth / this.aspectRatio
-
-            if (this.rotate) {
-                const scale = canvas.height / frame.width
-                const x = canvas.width / 2
-                const y = canvas.height / 2
-                ctx.translate(x, y)
-                ctx.rotate((this.camSettings.rotation * Math.PI) / 180)
-                await ctx?.drawImage(
-                    frame,
-                    (-frame.width / 2) * scale,
-                    (-frame.height / 2) * scale,
-                    frame.width * scale,
-                    frame.height * scale
-                )
-                ctx.rotate(-((this.camSettings.rotation * Math.PI) / 180))
-                ctx.translate(-x, -y)
-            } else await ctx?.drawImage(frame, 0, 0, frame.width, frame.height, 0, 0, canvas.width, canvas.height)
-
-            this.isLoaded = true
+    documentVisibilityChanged() {
+        const visibility = document.visibilityState
+        this.isVisibleDocument = visibility === 'visible'
+    }
+
+    viewportVisibilityChanged(newVal: boolean) {
+        this.isVisibleViewport = newVal
+    }
+
+    @Watch('isVisible', { immediate: true })
+    isVisibleChanged(newVal: boolean) {
+        if (newVal) {
+            this.startStream()
+            return
         }
 
-        this.$nextTick(() => {
-            this.onLoad()
-        })
+        this.stopStream()
+    }
+
+    refreshFrame() {
+        if (!this.isVisible) return
+
+        if (this.timer !== null) {
+            window.clearTimeout(this.timer)
+            this.timer = null
+        }
+
+        const url = new URL(this.url)
+        url.searchParams.append('bypassCache', new Date().getTime().toString())
+        this.image.src = url.toString()
+        this.request_start_time = performance.now()
     }
 
     onLoad() {
-        this.isLoaded = true
+        if (this.status !== 'connected') {
+            this.status = 'connected'
+            this.statusMessage = ''
+        }
+        this.frames++
 
-        const targetFps = this.camSettings.target_fps || 10
-        const end_time = performance.now()
-        const current_time = end_time - this.start_time
-        this.time = this.time * this.time_smoothing + current_time * (1.0 - this.time_smoothing)
-        this.start_time = end_time
+        if (this.aspectRatio === null) {
+            this.aspectRatio = this.image.naturalWidth / this.image.naturalHeight
+        }
 
+        const targetFps = this.camSettings.target_fps || 10
         const target_time = 1000 / targetFps
 
         const current_request_time = performance.now() - this.request_start_time
         this.request_time =
-            this.request_time * this.request_time_smoothing + current_request_time * (1.0 - this.request_time_smoothing)
+            this.request_time * this.request_time_smoothing + current_request_time * (1 - this.request_time_smoothing)
         const timeout = Math.max(0, target_time - this.request_time)
 
-        this.$nextTick(() => {
-            this.timer = setTimeout(this.refreshFrame, timeout)
-        })
+        this.timer = window.setTimeout(this.refreshFrame, timeout)
     }
 
-    loadImage(url: string) {
-        return new Promise((r) => {
-            let image = new Image()
-            image.onload = () => r(image)
-            image.onerror = () => setTimeout(this.refreshFrame, 1000)
-            image.src = url
-        })
-    }
+    onError() {
+        this.status = 'error'
+        this.statusMessage = this.$t('Panels.WebcamPanel.ErrorWhileConnecting', { url: this.url }).toString()
 
-    mounted() {
-        document.addEventListener('visibilitychange', this.documentVisibilityChanged)
-        this.refreshFrame()
-    }
+        if (this.timer !== null) return
 
-    beforeDestroy() {
-        document.removeEventListener('visibilitychange', this.documentVisibilityChanged)
+        this.timer = window.setTimeout(this.refreshFrame, 1000)
     }
 
-    documentVisibilityChanged() {
-        const visibility = document.visibilityState
-        this.isVisibleDocument = visibility === 'visible'
-        if (!this.isVisibleDocument) this.stopStream()
-        this.visibilityChanged()
+    startStream() {
+        // is not visible or already streaming
+        if (!this.isVisible) return
+
+        if (this.status !== 'connected') {
+            this.status = 'connecting'
+            this.statusMessage = this.$t('Panels.WebcamPanel.ConnectingTo', { url: this.url }).toString()
+        }
+
+        this.clearTimers()
+
+        this.fpsTimer = window.setInterval(() => {
+            this.currentFPS = this.frames
+            this.frames = 0
+        }, 1000)
+
+        this.refreshFrame()
     }
 
-    viewportVisibilityChanged(newVal: boolean) {
-        this.isVisibleViewport = newVal
-        this.visibilityChanged()
+    stopStream() {
+        this.clearTimers()
     }
 
-    visibilityChanged() {
-        if (this.isVisibleViewport && this.isVisibleDocument) {
-            this.startStream()
-            return
+    clearTimers() {
+        if (this.timer) {
+            window.clearTimeout(this.timer)
+            this.timer = null
         }
 
-        this.stopStream()
+        if (this.fpsTimer) {
+            window.clearTimeout(this.fpsTimer)
+            this.fpsTimer = null
+            this.frames = 0
+        }
     }
 
-    startStream() {
-        if (this.isVisible) return
-        this.isVisible = true
-        this.refreshFrame()
-    }
+    @Watch('camSettings', { deep: true })
+    camSettingsChanged() {
+        this.aspectRatio = null
+        this.stopStream()
 
-    stopStream() {
-        this.isVisible = false
-        clearTimeout(this.timer)
-        this.timer = undefined
+        this.status = 'connecting'
+
+        this.startStream()
     }
 }
 </script>
 
 <style scoped>
+.webcamBackground {
+    position: relative;
+    background: rgba(0, 0, 0, 0.8);
+}
+
 .webcamImage {
     width: 100%;
 }
 
+._webcam_mjpegstreamer_output {
+    aspect-ratio: calc(3 / 2);
+}
+
 .webcamFpsOutput {
     display: inline-block;
     position: absolute;
     bottom: 0;
     right: 0;
-    background: rgba(0, 0, 0, 0.8);
     padding: 3px 10px;
     border-top-left-radius: 5px;
+    background: rgba(0, 0, 0, 0.8);
+}
+
+html.theme--light .webcamBackground {
+    background: rgba(255, 255, 255, 0.7);
 }
 
 html.theme--light .webcamFpsOutput {
diff --git a/src/locales/da.json b/src/locales/da.json
index 35e9a865d..6c8049e9d 100644
--- a/src/locales/da.json
+++ b/src/locales/da.json
@@ -990,7 +990,6 @@
             "DbHistoryTotals": "Totalhistorik",
             "DbMaintenance": "Vedligeholdelse",
             "DbNavigation": "Navigation",
-            "DBNavigation": "Navigation",
             "DbTimelapseSettings": "Timelapse indstillinger",
             "DbView": "Vis indstillinger",
             "EstimateValues": {
diff --git a/src/locales/de.json b/src/locales/de.json
index 67220131d..bc4ac382c 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -144,6 +144,12 @@
         "ScrewName": "Name der Schraube",
         "ScrewOutput": "{current} von {max}"
     },
+    "CancelJobDialog": {
+        "AreYouSure": "Bist du sicher?",
+        "CancelJob": "Druck abbrechen",
+        "No": "Nein",
+        "Yes": "Ja"
+    },
     "ConnectionDialog": {
         "CannotConnectTo": "Kann keine Verbindung zu Moonraker ({host}) herstellen.",
         "CheckMoonrakerLog": "Wenn diese Meldung wiederholt erscheint, schaue bitte in die Logdatei unter:",
@@ -1196,6 +1202,8 @@
             "BoolBigThumbnailDescription": "Zeige ein großes Thumbnail in der Status-Anzeige während eines Drucks.",
             "BoolHideUploadAndPrintButton": "\"Hochladen & Drucken\" Schaltfläche ausblenden",
             "BoolHideUploadAndPrintButtonDescription": "Blendet die \"Hochladen & Drucken\" Schaltfläche in der Kopfleiste ein oder aus.",
+            "ConfirmOnCancelJob": "Bestätigung für Druck abbrechen erforderlich",
+            "ConfirmOnCancelJobDescription": "Zeige vor dem Druck abbrechen einen Bestätigungsdialog.",
             "ConfirmOnCoolDown": "Bestätigung für Abkühlen erforderlich",
             "ConfirmOnCoolDownDescription": "Zeige vor dem Abkühlen einen Bestätigungsdialog.",
             "ConfirmOnEmergencyStop": "Bestätigung für Notstopp erforderlich",
diff --git a/src/locales/en.json b/src/locales/en.json
index 5c403574b..e13f50b3a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -144,10 +144,17 @@
         "ScrewName": "Screw Name",
         "ScrewOutput": "{current} of {max}"
     },
+    "CancelJobDialog": {
+        "AreYouSure": "Are you sure?",
+        "CancelJob": "Cancel Job",
+        "No": "No",
+        "Yes": "Yes"
+    },
     "ConnectionDialog": {
         "CannotConnectTo": "Cannot connect to Moonraker ({host}).",
         "CheckMoonrakerLog": "If this message appears repeatedly, please have a look in the log file located at:",
         "Connecting": "Connecting to {host}",
+        "ErrorMessage": "Error message: {message}",
         "Failed": "Connection failed",
         "Initializing": "Initializing",
         "TryAgain": "try again"
@@ -197,6 +204,7 @@
         "Downloading": "Downloading",
         "FailedSave": "{filename} could not be uploaded!",
         "FileReadOnly": "read-only",
+        "FileStructure": "File Structure",
         "SaveClose": "Save & close",
         "SaveRestart": "Save & Restart",
         "SuccessfullySaved": "{filename} successfully saved.",
@@ -663,6 +671,7 @@
             "Headline": "Console",
             "HideTemperatures": "Hide temperatures",
             "HideTimelapse": "Hide Timelapse",
+            "RawOutput": "RAW-Output (for debugging)",
             "SendCode": "Send code...",
             "SetupConsole": "Setup Console"
         },
@@ -812,6 +821,9 @@
         },
         "WebcamPanel": {
             "All": "All",
+            "ConnectingTo": "Connecting to {url}",
+            "Disconnected": "Disconnected",
+            "ErrorWhileConnecting": "Error while connecting to {url}",
             "FPS": "FPS",
             "Headline": "Webcam",
             "NoWebcam": "No webcam available. Add a webcam under \"Interface Settings\" -> \"Webcams\".",
@@ -1196,6 +1208,8 @@
             "BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
             "BoolHideUploadAndPrintButton": "Hide Upload and Print Button",
             "BoolHideUploadAndPrintButtonDescription": "Show or hide the \"Upload and Print\" button in the top bar.",
+            "ConfirmOnCancelJob": "Require confirm on Cancel Job",
+            "ConfirmOnCancelJobDescription": "Show a confirmation dialog on Cancel Job",
             "ConfirmOnCoolDown": "Require confirm on CoolDown",
             "ConfirmOnCoolDownDescription": "Show a confirmation dialog on CoolDown",
             "ConfirmOnEmergencyStop": "Require confirm on Emergency Stop",
diff --git a/src/locales/es.json b/src/locales/es.json
index 7261fdcd7..a71309968 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -1001,7 +1001,6 @@
             "DbHistoryTotals": "Historial Totales",
             "DbMaintenance": "Mantenimiento",
             "DbNavigation": "Navegación",
-            "DBNavigation": "Navegación",
             "DbTimelapseSettings": "Ajustes de Timelapse",
             "DbView": "Ajustes de Vista",
             "DbWebcams": "Cámaras web",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 87901bd98..9ee45b299 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -931,7 +931,7 @@
             "DbConsoleHistory": "Historique de la console",
             "DbHistoryJobs": "Historique des travaux",
             "DbHistoryTotals": "Historique Totaux",
-            "DBNavigation": "Navigation",
+            "DbNavigation": "Navigation",
             "DbTimelapseSettings": "Réglages Timelapse",
             "DbView": "Voir les paramètres",
             "EstimateValues": {
diff --git a/src/locales/it.json b/src/locales/it.json
index d4a2267fd..cf4572474 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -922,7 +922,7 @@
             "DbConsoleHistory": "Cronologia Console",
             "DbHistoryJobs": "Cronologia Lavori",
             "DbHistoryTotals": "Cronologia Totali",
-            "DBNavigation": "Navigazione",
+            "DbNavigation": "Navigazione",
             "DbTimelapseSettings": "Impostazioni Timelapse",
             "DbView": "Vedi Impostazioni ",
             "EstimateValues": {
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 7887bada8..844439810 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -906,7 +906,7 @@
             "DbConsoleHistory": "Historia Konsoli",
             "DbHistoryJobs": "Historia wydruków",
             "DbHistoryTotals": "Łączna historia",
-            "DBNavigation": "Nawigacja",
+            "DbNavigation": "Nawigacja",
             "DbTimelapseSettings": "Ustawienia timelapse",
             "DbView": "Ustawienia",
             "EstimateValues": {
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 95b7a368d..a5628c716 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -944,7 +944,7 @@
             "DbConsoleHistory": "История консоли",
             "DbHistoryJobs": "История заданий",
             "DbHistoryTotals": "Всего заданий",
-            "DBNavigation": "Навигация",
+            "DbNavigation": "Навигация",
             "DbTimelapseSettings": "Настройки таймлапса",
             "DbView": "Настройки отображения",
             "EstimateValues": {
diff --git a/src/locales/se.json b/src/locales/se.json
index ec8607981..851b3200d 100644
--- a/src/locales/se.json
+++ b/src/locales/se.json
@@ -922,7 +922,7 @@
             "DbConsoleHistory": "Konsolhistorik",
             "DbHistoryJobs": "Jobbhistorik",
             "DbHistoryTotals": "Historik totalt",
-            "DBNavigation": "Navigering",
+            "DbNavigation": "Navigering",
             "DbTimelapseSettings": "Timelapse inställningar",
             "DbView": "Visa inställningar",
             "EstimateValues": {
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 884c60b6d..9b522bb45 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -197,6 +197,7 @@
         "Downloading": "正在下载",
         "FailedSave": "上传{filename}失败！",
         "FileReadOnly": "只读文件",
+        "FileStructure": "结构",
         "SaveClose": "保存并关闭",
         "SaveRestart": "保存并重启",
         "SuccessfullySaved": "{filename}保存成功！",
diff --git a/src/pages/Console.vue b/src/pages/Console.vue
index a37067bcb..39a5da20b 100644
--- a/src/pages/Console.vue
+++ b/src/pages/Console.vue
@@ -71,6 +71,13 @@
                                 :label="filter.name"
                                 @change="toggleFilter(filter)" />
                         </v-list-item>
+                        <v-list-item class="minHeight36">
+                            <v-checkbox
+                                v-model="rawOutput"
+                                class="mt-0"
+                                hide-details
+                                :label="$t('Panels.MiniconsolePanel.RawOutput')" />
+                        </v-list-item>
                     </v-list>
                 </v-menu>
             </v-col>
@@ -193,6 +200,14 @@ export default class PageConsole extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'console.autoscroll', value: newVal })
     }
 
+    get rawOutput(): boolean {
+        return this.$store.state.gui.console.rawOutput ?? false
+    }
+
+    set rawOutput(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'console.rawOutput', value: newVal })
+    }
+
     commandClick(msg: string): void {
         this.gcode = msg
 
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 6d8d7d326..2b531c980 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -85,7 +85,7 @@ import { Mixins } from 'vue-property-decorator'
 import ExtruderControlPanel from '@/components/panels/ExtruderControlPanel.vue'
 import DashboardMixin from '@/components/mixins/dashboard'
 import KlippyStatePanel from '@/components/panels/KlippyStatePanel.vue'
-import MachineSettingsPanel from '@/components/panels/MachineSettings/MachineSettingsPanel.vue'
+import MachineSettingsPanel from '@/components/panels/MachineSettingsPanel.vue'
 import MacrogroupPanel from '@/components/panels/MacrogroupPanel.vue'
 import MacrosPanel from '@/components/panels/MacrosPanel.vue'
 import MiniconsolePanel from '@/components/panels/MiniconsolePanel.vue'
diff --git a/src/plugins/webSocketClient.ts b/src/plugins/webSocketClient.ts
index 1208bb7cb..6e4820240 100644
--- a/src/plugins/webSocketClient.ts
+++ b/src/plugins/webSocketClient.ts
@@ -36,6 +36,11 @@ export class WebSocketClient {
                 window.console.error(`Response Error: ${data.error.message} (${wait?.action ?? 'no action'})`)
             }
 
+            if (data.error.message === 'Unauthorized' && wait?.action === 'server/setConnectionId') {
+                this.close()
+                this.store?.dispatch('socket/setConnectionFailed', data.error.message)
+            }
+
             if (wait?.id) {
                 const modulename = wait.action?.split('/')[1] ?? null
 
diff --git a/src/store/files/types.ts b/src/store/files/types.ts
index 55197c159..e862daf16 100644
--- a/src/store/files/types.ts
+++ b/src/store/files/types.ts
@@ -97,3 +97,13 @@ export interface ApiGetDirectoryReturnFile {
     filename: string
     permissions: string
 }
+
+export interface ConfigFileKey {
+    name: string
+    type: string
+    line: number
+}
+
+export interface ConfigFileSection extends ConfigFileKey {
+    children: ConfigFileKey[]
+}
diff --git a/src/store/gui/console/index.ts b/src/store/gui/console/index.ts
index b152a5c7e..d8e6e31c8 100644
--- a/src/store/gui/console/index.ts
+++ b/src/store/gui/console/index.ts
@@ -13,6 +13,7 @@ export const getDefaultState = (): GuiConsoleState => {
         height: 300,
         autoscroll: true,
         consolefilters: {},
+        rawOutput: false,
     }
 }
 
diff --git a/src/store/gui/console/types.ts b/src/store/gui/console/types.ts
index 35e63cda8..6e487f9f3 100644
--- a/src/store/gui/console/types.ts
+++ b/src/store/gui/console/types.ts
@@ -9,6 +9,7 @@ export interface GuiConsoleState {
     consolefilters: {
         [key: string]: GuiConsoleStateFilter
     }
+    rawOutput: boolean
 }
 
 export interface GuiConsoleStateFilter {
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 6f94a5344..b8aaa2903 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -166,6 +166,7 @@ export const getDefaultState = (): GuiState => {
             confirmOnEmergencyStop: false,
             confirmOnCoolDown: false,
             confirmOnPowerDeviceChange: false,
+            confirmOnCancelJob: false,
             boolBigThumbnail: true,
             bigThumbnailBackground: defaultBigThumbnailBackground,
             boolWideNavDrawer: false,
diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index a1bef68e2..fb3589081 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -108,6 +108,7 @@ export interface GuiState {
         confirmOnEmergencyStop: boolean
         confirmOnCoolDown: boolean
         confirmOnPowerDeviceChange: boolean
+        confirmOnCancelJob: boolean
         boolBigThumbnail: boolean
         bigThumbnailBackground: string
         boolWideNavDrawer: boolean
diff --git a/src/store/socket/actions.ts b/src/store/socket/actions.ts
index 0a207d48b..24263cd2d 100644
--- a/src/store/socket/actions.ts
+++ b/src/store/socket/actions.ts
@@ -173,4 +173,8 @@ export const actions: ActionTree<SocketState, RootState> = {
     reportDebug(_, payload) {
         window.console.log(payload)
     },
+
+    setConnectionFailed({ commit }, payload) {
+        commit('setDisconnected', payload)
+    },
 }
diff --git a/src/store/socket/index.ts b/src/store/socket/index.ts
index c50c7bc7a..f9f1a8681 100644
--- a/src/store/socket/index.ts
+++ b/src/store/socket/index.ts
@@ -20,6 +20,7 @@ export const getDefaultState = (): SocketState => {
         isConnected: false,
         isConnecting: false,
         connectingFailed: false,
+        connectionFailedMessage: null,
         loadings: [],
         initializationList: ['server'],
         connection_id: null,
diff --git a/src/store/socket/mutations.ts b/src/store/socket/mutations.ts
index 9399eb169..96ed25d60 100644
--- a/src/store/socket/mutations.ts
+++ b/src/store/socket/mutations.ts
@@ -16,11 +16,13 @@ export const mutations: MutationTree<SocketState> = {
         Vue.set(state, 'connectingFailed', false)
     },
 
-    setDisconnected(state) {
+    setDisconnected(state, message?: string) {
         Vue.set(state, 'isConnected', false)
         Vue.set(state, 'isConnecting', false)
         Vue.set(state, 'connectingFailed', true)
         Vue.set(state, 'connection_id', null)
+
+        if (message) Vue.set(state, 'connectionFailedMessage', message)
     },
 
     setData(state, payload) {
diff --git a/src/store/socket/types.ts b/src/store/socket/types.ts
index c2675e784..9c8d0c1ee 100644
--- a/src/store/socket/types.ts
+++ b/src/store/socket/types.ts
@@ -7,6 +7,7 @@ export interface SocketState {
     isConnected: boolean
     isConnecting: boolean
     connectingFailed: boolean
+    connectionFailedMessage: string | null
     loadings: string[]
     initializationList: string[]
     connection_id: number | null