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/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/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/panels/Extruder/ExtruderControlPanelControl.vue b/src/components/panels/Extruder/ExtruderControlPanelControl.vue
index 25d1d053b..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,23 +263,22 @@ export default class ExtruderControlPanel extends Mixins(BaseMixin, ExtruderMixi
     }
 
     sendRetract(): void {
-        const gcode =
-            `SAVE_GCODE_STATE NAME=ui_retract\n` +
-            `M83\n` +
-            `G1 E-${this.feedamount} F${this.feedrate * 60}\n` +
-            `RESTORE_GCODE_STATE NAME=ui_retract`
-        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 {
+        this.sendCommand(this.feedamount, 'btnExtrude')
+    }
+
+    sendCommand(length: number, loading: string): void {
         const gcode =
-            `SAVE_GCODE_STATE NAME=ui_extrude\n` +
+            `SAVE_GCODE_STATE NAME=_ui_extrude\n` +
             `M83\n` +
-            `G1 E${this.feedamount} F${this.feedrate * 60}\n` +
-            `RESTORE_GCODE_STATE NAME=ui_extrude`
+            `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/MachineSettingsPanel.vue b/src/components/panels/MachineSettingsPanel.vue
index f2fc497dd..73319a34a 100644
--- a/src/components/panels/MachineSettingsPanel.vue
+++ b/src/components/panels/MachineSettingsPanel.vue
@@ -87,11 +87,12 @@
                                 :output-error-msg="true"
                                 :has-spinner="true"
                                 :spinner-factor="5"
-                                :step="0.01"
-                                :min="0.0"
-                                :max="0.99"
-                                :dec="2"
-                                @submit="sendCmd" />
+                                :step="1"
+                                :min="0"
+                                :max="99"
+                                :dec="0"
+                                unit="%"
+                                @submit="sendCruiseRatioCmd" />
                         </v-col>
                     </v-row>
                 </v-card-text>
@@ -144,7 +145,7 @@ export default class MachineSettingsPanel extends Mixins(BaseMixin) {
 
         if (value === null) return null
 
-        return Math.round(value * 100) / 100
+        return Math.round(value * 100)
     }
 
     get squareCornerVelocity(): number {
@@ -166,7 +167,7 @@ export default class MachineSettingsPanel extends Mixins(BaseMixin) {
     get defaultMinimumCruiseRatio(): number {
         const value = this.configPrinter.minimum_cruise_ratio ?? 0.5
 
-        return Math.round(value / 10) * 10
+        return Math.round(value * 100)
     }
 
     get defaultSquareCornerVelocity(): number {
@@ -175,6 +176,12 @@ export default class MachineSettingsPanel extends Mixins(BaseMixin) {
         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}`
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/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 8d95a42f7..00d4a9078 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/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 2f0c91bf3..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.",
@@ -813,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\".",
@@ -1197,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/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/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/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