diff --git a/.gitignore b/.gitignore
index 85dd33c5f..acffdf238 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ design
 *.log
 packages/test
 dist
+dev-dist
 temp
 .vuerc
 .version
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c96e03b4..ea0a17a75 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,39 @@
 # Changelog
 All notable changes to Mainsail will be documented in this file.
 
+## [2.6.1](https://github.com/mainsail-crew/mainsail/releases/tag/v2.6.1) - 2023-07-24
+### Bug Fixes and Improvements
+
+- Show delete dialog for single files too (#1442) | [7da3352](7da33523d1ec7c4a3206400fb92803685176167e)
+- Remove variable check in klipper config StreamParser (#1435) | [6e7ef65](6e7ef6554ec88ceb29f66b4d6a5d5f21ef77671b)
+- Fix condition in restartServiceNameExists check (#1450) | [a7e70c7](a7e70c75d0009ffed14e8717ad8286f91e4e7e8a)
+- Avoid hitting 100% before print is complete (#1455) | [3959000](39590004da7ca22fef82fbd148b31683c462bb13)
+- Fix issue with ETA and 12h time format (#1463) | [039a446](039a446944f05ea241574c65040d520bbbef0e9b)
+- Fix issue with CSV separator in contents (#1460) | [1895d2d](1895d2d90591946c792faaf3f62c52865f27cd62)
+- Fix issue with webcams in farm printers (#1469) | [5b2bea5](5b2bea51aab79aabfab02825cdce45be351c1c6f)
+
+### Refactor
+
+- Build version file for moonraker (#1449) | [21d3d39](21d3d395039ec855d062a5ee5e5b43e2d858f402)
+- Use moonraker webcam api instead of direct DB access (#1445) | [7c81690](7c81690c1e299c804edb4ede0acab7d77d1dedbe)
+- Change SettingsGeneralTab file (#1475) | [db09bbe](db09bbe043b2e43053779709f5260c7275bc4969)
+- Extract Presets and Settings from TemperaturePanel (#1465) | [be25316](be253165a003c50fd992f43c586ce5315dc2352d)
+- Display errors and warnings in the update_manager (#1453) | [0cefa24](0cefa24e766c568a56127bfd55272735383cb45e)
+
+### Localization
+
+- **pl**: Update Polish translation (#1434) | [73e503f](73e503fc6448ae174dd7f9d59236c820bd4b6631)
+- **pl**: Update Polish translation (#1447) | [d844125](d8441254db04d672fe2137f64e39127f524c4769)
+- **pl**: Update polish locale (#1471) | [a58bef2](a58bef2a03479262b4ee5db2b5d103e8dc2194c5)
+- **pl**: Update Polish translation (#1476) | [6758049](6758049d29c7410bcdedec689eaca503952b2c7e)
+- **tr**: Update turkish locale (#1480) | [f52b94c](f52b94c459ad759e160a568d3b6f366b0e65f484)
+- **zh**: Update Chinese (zh) localization (#1459) | [bcbef2f](bcbef2f19af4746b941ddcb29c98ff5f071611d0)
+
+### Other
+
+- **pwa**: Remove debug warnings in browser console (#1441) | [2962df2](2962df21e512baad6976dc502d6234c2969da686)
+- Add dev-dist to .gitignore (#1451) | [ef2d17c](ef2d17cadde566e8b713031cb7292d65ca1bec12)
+
 ## [2.6.0](https://github.com/mainsail-crew/mainsail/releases/tag/v2.6.0) - 2023-06-19
 ### Features
 
diff --git a/package-lock.json b/package-lock.json
index 83dc5cb1d..82137c852 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mainsail",
-    "version": "2.6.0",
+    "version": "2.6.1",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "mainsail",
-            "version": "2.6.0",
+            "version": "2.6.1",
             "dependencies": {
                 "@codemirror/commands": "^6.0.1",
                 "@codemirror/lang-css": "^6.0.0",
@@ -10253,9 +10253,9 @@
             }
         },
         "node_modules/word-wrap": {
-            "version": "1.2.3",
-            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-            "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.4.tgz",
+            "integrity": "sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==",
             "dev": true,
             "engines": {
                 "node": ">=0.10.0"
@@ -17924,9 +17924,9 @@
             }
         },
         "word-wrap": {
-            "version": "1.2.3",
-            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-            "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.4.tgz",
+            "integrity": "sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==",
             "dev": true
         },
         "workbox-background-sync": {
diff --git a/package.json b/package.json
index 181eb4ea7..8eb715712 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mainsail",
-    "version": "2.6.0",
+    "version": "2.6.1",
     "private": true,
     "decription": "a klipper web interface",
     "author": {
diff --git a/src/App.vue b/src/App.vue
index f24eebf0a..24aacef7b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -170,7 +170,7 @@ export default class App extends Mixins(BaseMixin) {
     }
 
     get print_percent(): number {
-        return Math.round(this.$store.getters['printer/getPrintPercent'] * 100)
+        return Math.floor(this.$store.getters['printer/getPrintPercent'] * 100)
     }
 
     @Watch('language')
diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index 75420cad1..63463ab87 100644
--- a/src/components/TheEditor.vue
+++ b/src/components/TheEditor.vue
@@ -239,25 +239,33 @@ export default class TheEditor extends Mixins(BaseMixin) {
         if (!this.isWriteable) return null
         if (['printing', 'paused'].includes(this.printer_state)) return null
 
+        // check for generic services <service>.conf (like moonraker.conf, crowsnest.conf, sonar.conf)
         if (this.availableServices.includes(this.filenameWithoutExtension) && this.fileExtension === 'conf')
             return this.filenameWithoutExtension
+
+        // old webcam service DEPRECATED
         if (this.filename.startsWith('webcam') && ['conf', 'txt'].includes(this.fileExtension)) return 'webcamd'
+
+        // check for mooncord config files
         if (this.filename.startsWith('mooncord') && this.fileExtension === 'json') return 'mooncord'
-        if (this.filename === 'moonraker.conf') return this.moonrakerRestartInstance ?? 'moonraker'
 
+        // fallback for moonraker with multi instances
+        if (this.filename === 'moonraker.conf') return 'moonraker'
+
+        // all .cfg files will be klipper config files
         if (this.fileExtension === 'cfg') return 'klipper'
 
         return null
     }
 
     get restartServiceNameExists() {
-        if (this.restartServiceName) return true
+        // hide the button, if there is no service found
+        if (this.restartServiceName === null) return false
 
-        return this.availableServices.includes(this.restartServiceName)
-    }
+        // klipper and moonraker uses specific api calls instead of generic service restart
+        if (['klipper', 'moonraker'].includes(this.restartServiceName)) return true
 
-    get moonrakerRestartInstance() {
-        return this.$store.state.gui.editor.moonrakerRestartInstance
+        return this.availableServices.includes(this.restartServiceName)
     }
 
     get confirmUnsavedChanges() {
diff --git a/src/components/TheUpdateDialog.vue b/src/components/TheUpdateDialog.vue
index fc45f2b06..946d9f374 100644
--- a/src/components/TheUpdateDialog.vue
+++ b/src/components/TheUpdateDialog.vue
@@ -161,10 +161,14 @@ export default class TheUpdateDialog extends Mixins(BaseMixin) {
             this.complete &&
             ['client', 'mainsail', 'full'].includes(this.application.toLowerCase())
         )
-            window.location.reload(true)
+            window.location.reload()
         else {
             this.$store.commit('server/updateManager/resetUpdateResponse')
-            this.$socket.emit('machine.update.status', { refresh: false }, { action: 'server/updateManager/getStatus' })
+            this.$socket.emit(
+                'machine.update.status',
+                { refresh: false },
+                { action: 'server/updateManager/onUpdateStatus' }
+            )
         }
     }
 
diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
index bb4c994a5..50619df51 100644
--- a/src/components/charts/TempChart.vue
+++ b/src/components/charts/TempChart.vue
@@ -14,11 +14,12 @@ import { convertName } from '@/plugins/helpers'
 import Component from 'vue-class-component'
 import { Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
-import { PrinterTempHistoryStateSerie, PrinterTempHistoryStateSourceEntry } from '@/store/printer/tempHistory/types'
+import { PrinterTempHistoryStateSourceEntry } from '@/store/printer/tempHistory/types'
 
 import type { ECharts } from 'echarts/core'
 import type { ECBasicOption } from 'echarts/types/dist/shared.d'
 import { mdiClock } from '@mdi/js'
+import { datasetTypesInPercents } from '@/store/variables'
 
 interface echartsTooltipObj {
     [key: string]: any
@@ -33,11 +34,48 @@ export default class TempChart extends Mixins(BaseMixin) {
     }
 
     private isVisible = true
-    public chartOptions: ECBasicOption = {
-        darkMode: true,
-        renderer: 'svg',
-        animation: false,
-        tooltip: {
+    get chartOptions(): ECBasicOption {
+        return {
+            darkMode: true,
+            renderer: 'svg',
+            animation: false,
+            tooltip: this.tooltip,
+            grid: {
+                top: 35,
+                right: this.gridRight,
+                bottom: 30,
+                left: 25,
+            },
+            legend: {
+                animation: false,
+                show: false,
+                selected: this.selectedLegends,
+            },
+            xAxis: {
+                type: 'time',
+                splitNumber: 5,
+                minInterval: 60 * 1000,
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.06)',
+                    },
+                },
+                axisLabel: {
+                    color: 'rgba(255, 255, 255, 0.24)',
+                    margin: 10,
+                    formatter: this.timeFormat,
+                },
+            },
+            yAxis: this.yAxis,
+            media: this.media,
+            dataset: { source: this.source },
+            series: this.series,
+        }
+    }
+
+    get tooltip() {
+        return {
             animation: false,
             trigger: 'axis',
             backgroundColor: 'rgba(0,0,0,0.9)',
@@ -57,38 +95,11 @@ export default class TempChart extends Mixins(BaseMixin) {
                 obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5
                 return obj
             },
-        },
-        grid: {
-            top: 35,
-            right: 15,
-            bottom: 30,
-            left: 25,
-        },
-        legend: {
-            animation: false,
-            show: false,
-            selected: {},
-        },
-        /*dataZoom: [{
-            type: 'inside',
-        }],*/
-        xAxis: {
-            type: 'time',
-            splitNumber: 5,
-            minInterval: 60 * 1000,
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: 'rgba(255, 255, 255, 0.06)',
-                },
-            },
-            axisLabel: {
-                color: 'rgba(255, 255, 255, 0.24)',
-                margin: 10,
-                formatter: this.timeFormat,
-            },
-        },
-        yAxis: [
+        }
+    }
+
+    get yAxis() {
+        return [
             {
                 name: this.$t('Panels.TemperaturePanel.TemperaturesInChart'),
                 type: 'value',
@@ -158,15 +169,18 @@ export default class TempChart extends Mixins(BaseMixin) {
                     },
                 },
             },
-        ],
-        media: [
+        ]
+    }
+
+    get media() {
+        return [
             {
                 query: {
                     minWidth: 500,
                 },
                 option: {
                     grid: {
-                        right: 15,
+                        right: this.optionGridRight,
                         left: 40,
                     },
                     yAxis: [
@@ -188,11 +202,7 @@ export default class TempChart extends Mixins(BaseMixin) {
                     ],
                 },
             },
-        ],
-        dataset: {
-            source: [],
-        },
-        series: [],
+        ]
     }
 
     get chart(): ECharts | null {
@@ -241,85 +251,32 @@ export default class TempChart extends Mixins(BaseMixin) {
         }
     }
 
-    mounted() {
-        this.initChart()
-        this.chartOptions.xAxis.axisLabel.formatter = this.timeFormat
+    get gridRight() {
+        return this.boolDisplayPwmAxis ? 25 : 15
     }
 
-    beforeDestroy() {
-        if (typeof window === 'undefined') return
-        if (this.chart) this.chart.dispose()
-    }
-
-    initChart() {
-        this.chartOptions.series = this.series
-        this.chartOptions.legend.selected = this.selectedLegends
-        this.updateChartPwmAxis()
-    }
-
-    updateChart() {
-        if (this.chart && this.isVisible) {
-            //const t0 = performance.now()
-            const limitDate = new Date(Date.now() - this.maxHistory * 1000)
-            let newSource = [...this.source].filter((entry: PrinterTempHistoryStateSourceEntry) => {
-                return entry.date >= limitDate
-            })
-
-            this.chart?.setOption(
-                {
-                    dataset: {
-                        source: newSource,
-                    },
-                },
-                false,
-                true
-            )
+    get optionGridRight() {
+        if (this.boolDisplayPwmAxis) return 35
 
-            //const t1 = performance.now()
-            //window.console.debug('calc chart', (t1-t0).toFixed(), newSource.length, this.source.length)
-
-            // reset tempHistory if working sources are smaller than 80%
-            if (this.source.length > 0 && newSource.length < this.maxHistory * 0.8) {
-                this.$socket.emit('server.temperature_store', {}, { action: 'printer/tempHistory/init' })
-            }
-        }
+        return 15
     }
 
-    updateChartPwmAxis() {
-        if (this.boolDisplayPwmAxis) {
-            this.chartOptions.yAxis[1].show = true
-            this.chartOptions.grid.right = 25
-            this.chartOptions.media[0].option.grid.right = 35
-        } else {
-            this.chartOptions.yAxis[1].show = false
-            this.chartOptions.grid.right = 15
-            this.chartOptions.media[0].option.grid.right = 15
-        }
+    beforeDestroy() {
+        if (typeof window === 'undefined') return
+        if (this.chart) this.chart.dispose()
     }
 
     visibilityChanged(isVisible: boolean) {
         this.isVisible = isVisible
-
-        if (isVisible) {
-            this.initChart()
-        }
     }
 
     tooltipFormatter(datasets: any) {
         let output = ''
 
-        const mainDatasets = datasets.filter((dataset: any) => {
-            if (dataset.seriesName === 'date') return false
-
-            const lastIndex = dataset.seriesName.lastIndexOf('-')
-            if (lastIndex === -1) return true
-
-            const suffix = dataset.seriesName.slice(lastIndex + 1)
-            return !['target', 'power', 'speed'].includes(suffix)
-        })
+        const mainDatasets = datasets.filter((dataset: any) => dataset.seriesName.endsWith('-temperature'))
         if (datasets.length) {
             let outputTime = datasets[0]['axisValueLabel']
-            outputTime = outputTime.substr(outputTime.indexOf(' '))
+            outputTime = outputTime.substring(outputTime.indexOf(' '))
 
             output +=
                 '<div class="row">' +
@@ -338,24 +295,35 @@ export default class TempChart extends Mixins(BaseMixin) {
         }
 
         mainDatasets.forEach((dataset: any) => {
+            const baseSeriesName = dataset.seriesName.substring(0, dataset.seriesName.lastIndexOf('-'))
+            let displayName = baseSeriesName
+            if (displayName.indexOf(' ') !== -1) {
+                displayName = displayName.substring(displayName.indexOf(' ') + 1)
+            }
+
             output += '<div class="row">'
 
             output += '<div class="col-auto py-0">'
             output += dataset.marker
-            output += "<span class='ml-2'>" + convertName(dataset.seriesName) + ':</span>'
+            output += "<span class='ml-2'>" + convertName(displayName) + ':</span>'
             output += '</div>'
 
             output += '<div class="col text-right py-0 font-weight-bold">'
 
-            if (dataset.seriesName in dataset.value) output += dataset.value[dataset.seriesName].toFixed(1)
-            if (dataset.seriesName + '-target' in dataset.value)
-                output += ' / ' + dataset.value[dataset.seriesName + '-target'].toFixed(1)
+            const seriesNameTemperature = `${baseSeriesName}-temperature`
+            const seriesNameTarget = `${baseSeriesName}-target`
+
+            if (seriesNameTemperature in dataset.value) output += dataset.value[seriesNameTemperature].toFixed(1)
+            if (seriesNameTarget in dataset.value) output += ' / ' + dataset.value[seriesNameTarget].toFixed(1)
             output += '°C'
 
-            if (dataset.seriesName + '-power' in dataset.value)
-                output += ' [ ' + (dataset.value[dataset.seriesName + '-power'] * 100).toFixed(0) + '% ]'
-            if (dataset.seriesName + '-speed' in dataset.value)
-                output += ' [ ' + (dataset.value[dataset.seriesName + '-speed'] * 100).toFixed(0) + '% ]'
+            datasetTypesInPercents.forEach((attrKey) => {
+                const seriesName = `${baseSeriesName}-${attrKey}`
+                if (!(seriesName in dataset.value)) return
+
+                const value = (dataset.value[seriesName] * 100).toFixed(0)
+                output += ` [ ${value}% ]`
+            })
 
             output += '</div>'
             output += '</div>'
@@ -364,26 +332,6 @@ export default class TempChart extends Mixins(BaseMixin) {
         return output
     }
 
-    @Watch('series', { deep: true })
-    seriesChanged(newVal: PrinterTempHistoryStateSerie[]) {
-        if (this.chart && this.chart?.isDisposed() !== true) {
-            this.chart.setOption(
-                {
-                    series: newVal,
-                },
-                false,
-                true
-            )
-        }
-    }
-
-    @Watch('source')
-    sourceChanged() {
-        if (this.chart?.isDisposed() !== true) {
-            this.updateChart()
-        }
-    }
-
     @Watch('selectedLegends')
     selectedLegendsChanged(newVal: any, oldVal: any) {
         if (this.chart?.isDisposed() !== true) {
@@ -396,14 +344,20 @@ export default class TempChart extends Mixins(BaseMixin) {
         }
     }
 
-    @Watch('boolDisplayPwmAxis')
-    boolDisplayPwmAxisChanged() {
-        this.updateChartPwmAxis()
-    }
+    @Watch('source')
+    sourceChanged(newVal: PrinterTempHistoryStateSourceEntry[]) {
+        // break if chart isn't initialized or not visible
+        if (!this.chart || !this.isVisible) return
+
+        const limitDate = new Date(Date.now() - this.maxHistory * 1000)
+        let newSource = newVal.filter((entry: PrinterTempHistoryStateSourceEntry) => {
+            return entry.date >= limitDate
+        })
 
-    @Watch('hours12Format')
-    hours12FormatChanged() {
-        this.chartOptions.xAxis.axisLabel.formatter = this.timeFormat
+        // reset tempHistory if working sources are smaller than 80%
+        if (newVal.length > 0 && newSource.length < this.maxHistory * 0.8) {
+            this.$socket.emit('server.temperature_store', {}, { action: 'printer/tempHistory/init' })
+        }
     }
 }
 </script>
diff --git a/src/components/mixins/base.ts b/src/components/mixins/base.ts
index 69902e850..8bc9ce571 100644
--- a/src/components/mixins/base.ts
+++ b/src/components/mixins/base.ts
@@ -175,13 +175,13 @@ export default class BaseMixin extends Vue {
     }
 
     get browserLocale() {
-        return navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language
+        return navigator.language
     }
 
     get hours12Format() {
         const setting = this.$store.state.gui.general.timeFormat
         if (setting === '12hours') return true
-        if (setting === null && this.browserLocale === 'en_us') return true
+        if (setting === null && this.browserLocale === 'en-US') return true
 
         return false
     }
diff --git a/src/components/mixins/webcam.ts b/src/components/mixins/webcam.ts
index 5f8870f12..0508a3b8d 100644
--- a/src/components/mixins/webcam.ts
+++ b/src/components/mixins/webcam.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import Component from 'vue-class-component'
 import {
     mdiAlbum,
@@ -10,9 +9,23 @@ import {
     mdiRaspberryPi,
     mdiWebcam,
 } from '@mdi/js'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
 
 @Component
-export default class WebcamMixin extends Vue {
+export default class WebcamMixin extends Mixins(BaseMixin) {
+    convertUrl(baseUrl: string, printerUrl: string | null) {
+        let url = new URL(baseUrl, this.hostUrl.toString())
+
+        // use printerURL if it exists
+        if (printerUrl !== null) url = new URL(baseUrl, printerUrl)
+
+        // overwrite url to baseUrl, if it is an absolute URL
+        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
+
+        return decodeURIComponent(url.toString())
+    }
+
     convertWebcamIcon(iconName: string): string {
         switch (iconName) {
             case 'mdiAlbum':
diff --git a/src/components/panels/FarmPrinterPanel.vue b/src/components/panels/FarmPrinterPanel.vue
index 6d5222052..00125b2c4 100644
--- a/src/components/panels/FarmPrinterPanel.vue
+++ b/src/components/panels/FarmPrinterPanel.vue
@@ -2,10 +2,8 @@
     <panel
         :icon="mdiPrinter3d"
         :title="printer_name"
-        :card-class="
-            'farmprinter-panel ' +
-            (!printer.socket.isConnected && !printer.socket.isConnecting ? 'disabledPrinter' : '')
-        "
+        card-class="farmprinter-panel"
+        :class="panelClass"
         :loading="printer.socket.isConnecting"
         :toolbar-color="isCurrentPrinter ? 'primary' : ''">
         <template #buttons>
@@ -17,7 +15,7 @@
                     </v-btn>
                 </template>
                 <v-list dense class="py-0">
-                    <v-list-item link @click="currentCamId = 'off'">
+                    <v-list-item link @click="currentCamName = 'off'">
                         <v-list-item-icon class="mr-2">
                             <v-icon small class="mt-1">{{ mdiWebcamOff }}</v-icon>
                         </v-list-item-icon>
@@ -27,9 +25,9 @@
                     </v-list-item>
                     <v-list-item
                         v-for="webcam of printer_webcams"
-                        :key="webcam.index"
+                        :key="webcam.name"
                         link
-                        @click="currentCamId = webcam.id">
+                        @click="currentCamName = webcam.name">
                         <v-list-item-icon class="mr-2">
                             <v-icon small class="mt-1">{{ convertWebcamIcon(webcam.icon) }}</v-icon>
                         </v-list-item-icon>
@@ -47,12 +45,12 @@
                         <div
                             v-if="
                                 printer.socket.isConnected &&
-                                currentCamId !== 'off' &&
+                                currentCamName !== 'off' &&
                                 currentWebcam &&
                                 'service' in currentWebcam
                             "
                             class="webcamContainer">
-                            <webcam-wrapper :webcam="currentWebcam" :show-fps="false" />
+                            <webcam-wrapper :webcam="currentWebcam" :printer-url="printerUrl" :show-fps="false" />
                         </div>
                         <v-card-title
                             class="white--text py-2"
@@ -122,6 +120,7 @@ import { mdiPrinter3d, mdiWebcam, mdiMenuDown, mdiWebcamOff, mdiFileOutline } fr
 import { Debounce } from 'vue-debounce-decorator'
 import WebcamMixin from '@/components/mixins/webcam'
 import WebcamWrapper from '@/components/webcams/WebcamWrapper.vue'
+import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 
 @Component({
     components: {
@@ -156,12 +155,12 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) {
         return this.$store.getters['farm/' + this.printer._namespace + '/isCurrentPrinter']
     }
 
-    get currentCamId() {
-        return this.$store.getters['farm/' + this.printer._namespace + '/getSetting']('currentCamId', 'off')
+    get currentCamName() {
+        return this.$store.getters['farm/' + this.printer._namespace + '/getSetting']('currentCamName', 'off')
     }
 
-    set currentCamId(newVal) {
-        this.$store.dispatch('farm/' + this.printer._namespace + '/setSettings', { currentCamId: newVal })
+    set currentCamName(newVal) {
+        this.$store.dispatch('farm/' + this.printer._namespace + '/setSettings', { currentCamName: newVal })
     }
 
     get printer_name() {
@@ -199,18 +198,30 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     get showWebcamSwitch() {
-        return this.printer.socket.isConnected && this.printer_webcams.length > 0
+        if (this.printer_webcams.length == 0) return false
+
+        return this.printer.socket.isConnected
     }
 
-    get printer_webcams() {
+    get printer_webcams(): GuiWebcamStateWebcam[] {
         return this.$store.getters['farm/' + this.printer._namespace + '/getPrinterWebcams']
     }
 
-    get currentWebcam() {
-        const currentCam = this.printer_webcams.find((webcam: any) => webcam.id === this.currentCamId)
+    get currentWebcam(): GuiWebcamStateWebcam | null {
+        const currentCam = this.printer_webcams?.find(
+            (webcam: GuiWebcamStateWebcam) => webcam.name === this.currentCamName
+        )
         if (currentCam) return currentCam
 
-        return false
+        return null
+    }
+
+    get panelClass(): string[] {
+        let output = []
+
+        if (!this.printer.socket.isConnected && !this.printer.socket.isConnecting) output.push('disabledPrinter')
+
+        return output
     }
 
     clickPrinter() {
@@ -268,10 +279,8 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) {
 .v-overlay {
     top: 48px;
 }
-</style>
 
-<style>
-.farmprinter-panel {
+::v-deep .farmprinter-panel {
     position: relative;
 }
 </style>
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 40776039b..4b41adfa1 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -962,7 +962,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     }
 
     exportHistory() {
-        const checkString = parseFloat('1.23').toLocaleString()
+        const checkString = parseFloat('1.23').toLocaleString(this.browserLocale)
         const decimalSeparator = checkString.indexOf(',') >= 0 ? ',' : '.'
         const csvSeperator = decimalSeparator === ',' ? ';' : ','
 
@@ -1011,7 +1011,14 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
             })
         }
 
-        const csvContent = 'data:text/csv;charset=utf-8,' + content.map((e) => e.join(csvSeperator)).join('\n')
+        // escape fields with the csvSeperator in the content
+        // prettier-ignore
+        const csvContent =
+            'data:text/csv;charset=utf-8,' +
+            content.map((entry) =>
+                entry.map((field) => (field.indexOf(csvSeperator) === -1 ? field : `"${field}"`)).join(csvSeperator)
+            ).join('\n')
+
         const link = document.createElement('a')
         link.setAttribute('href', encodeURI(csvContent))
         link.setAttribute('download', 'print_history.csv')
@@ -1044,7 +1051,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 default:
                     switch (typeof value) {
                         case 'number':
-                            return value?.toLocaleString(undefined, { useGrouping: false }) ?? 0
+                            return value?.toLocaleString(this.browserLocale, { useGrouping: false }) ?? 0
 
                         case 'string':
                             if (escapeChar !== null && value.includes(escapeChar)) value = '"' + value + '"'
diff --git a/src/components/panels/Machine/UpdatePanel.vue b/src/components/panels/Machine/UpdatePanel.vue
index ea786b893..18645e19d 100644
--- a/src/components/panels/Machine/UpdatePanel.vue
+++ b/src/components/panels/Machine/UpdatePanel.vue
@@ -1,63 +1,3 @@
-<style lang="scss" scoped>
-.cursor--pointer {
-    cursor: pointer;
-}
-
-ul.commits {
-    list-style: none;
-
-    li {
-        border-color: rgb(48, 54, 61);
-        border-style: solid;
-        border-width: 1px;
-        border-bottom-width: 0;
-
-        &:first-child {
-            border-top-left-radius: 6px;
-            border-top-right-radius: 6px;
-        }
-
-        &:last-child {
-            border-bottom-width: 1px;
-            border-bottom-left-radius: 6px;
-            border-bottom-right-radius: 6px;
-        }
-    }
-}
-</style>
-
-<style lang="scss">
-.v-timeline.groupedCommits {
-    .v-timeline-item__dot--small {
-        width: 18px;
-        height: 15px;
-        margin-top: 2px;
-
-        &:before {
-            display: block;
-            content: ' ';
-            position: relative;
-            width: 18px;
-            height: 2px;
-            top: 7px;
-            background: rgba(255, 255, 255, 0.5);
-            z-index: 1;
-        }
-    }
-
-    .v-timeline-item__inner-dot {
-        background-color: #1e1e1e !important;
-        border: 2px solid rgba(255, 255, 255, 0.5) !important;
-        width: 8px;
-        height: 8px;
-        position: relative;
-        z-index: 2;
-        margin-left: 5px;
-        margin-top: 2px;
-    }
-}
-</style>
-
 <template>
     <div>
         <panel
@@ -85,578 +25,119 @@ ul.commits {
                     <span>{{ $t('Machine.UpdatePanel.CheckForUpdates') }}</span>
                 </v-tooltip>
             </template>
-            <v-card-text class="px-0 py-0">
-                <v-container py-0 px-0>
-                    <div v-for="(value, key, index) of updateableSoftwares" :key="key">
-                        <v-divider v-if="index" class="my-0"></v-divider>
-                        <v-row class="py-2">
-                            <v-col class="pl-6">
-                                <strong>{{ 'name' in value ? value.name : key }}</strong>
-                                <br />
-                                <span
-                                    :class="getVersionClickable(value) ? 'primary--text cursor--pointer' : ''"
-                                    @click="openCommitsOverlay(key, value)">
-                                    <v-icon v-if="getVersionClickable(value)" small color="primary" class="mr-1">
-                                        {{ mdiInformation }}
-                                    </v-icon>
-                                    {{ getVersionOutput(value) }}
-                                </span>
-                            </v-col>
-                            <v-col class="col-auto pr-6 text-right" align-self="center">
-                                <template v-if="getRecoveryOptions(value)">
-                                    <v-menu :offset-y="true" title="Webcam">
-                                        <template #activator="{ on, attrs }">
-                                            <v-chip
-                                                small
-                                                label
-                                                outlined
-                                                :color="getBtnColor(value)"
-                                                :disabled="getBtnDisabled(value)"
-                                                class="minwidth-0 px-2 text-uppercase"
-                                                v-bind="attrs"
-                                                v-on="on">
-                                                <v-icon small class="mr-1">{{ getBtnIcon(value) }}</v-icon>
-                                                {{ getBtnText(value) }}
-                                                <v-icon small>{{ mdiMenuDown }}</v-icon>
-                                            </v-chip>
-                                        </template>
-                                        <v-list dense class="py-0">
-                                            <v-list-item @click="recovery(key, false)">
-                                                <v-list-item-icon class="mr-0">
-                                                    <v-icon small>{{ mdiReload }}</v-icon>
-                                                </v-list-item-icon>
-                                                <v-list-item-content>
-                                                    <v-list-item-title>Soft Recovery</v-list-item-title>
-                                                </v-list-item-content>
-                                            </v-list-item>
-                                            <v-list-item @click="recovery(key, true)">
-                                                <v-list-item-icon class="mr-0">
-                                                    <v-icon small>{{ mdiReload }}</v-icon>
-                                                </v-list-item-icon>
-                                                <v-list-item-content>
-                                                    <v-list-item-title>Hard Recovery</v-list-item-title>
-                                                </v-list-item-content>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
-                                </template>
-                                <template v-else>
-                                    <v-chip
-                                        small
-                                        label
-                                        outlined
-                                        :color="getBtnColor(value)"
-                                        :disabled="getBtnDisabled(value)"
-                                        class="minwidth-0 px-2 text-uppercase"
-                                        @click="updateModule(key)">
-                                        <v-icon small class="mr-1">{{ getBtnIcon(value) }}</v-icon>
-                                        {{ getBtnText(value) }}
-                                    </v-chip>
-                                </template>
-                            </v-col>
-                        </v-row>
-                    </div>
-                    <template v-if="'system' in version_info">
-                        <v-divider class="my-0 border-top-2"></v-divider>
-                        <v-row class="pt-2">
-                            <v-col class="col-auto pl-6 text-no-wrap">
-                                <strong>{{ $t('Machine.UpdatePanel.System') }}</strong>
-                                <br />
-                                <v-tooltip v-if="version_info.system.package_count > 0" top :max-width="300">
-                                    <template #activator="{ on, attrs }">
-                                        <span v-bind="attrs" v-on="on">
-                                            {{ version_info.system.package_count }}
-                                            {{ $t('Machine.UpdatePanel.PackagesCanBeUpgraded') }}
-                                        </span>
-                                    </template>
-                                    <span>{{ version_info.system.package_list.join(', ') }}</span>
-                                </v-tooltip>
-                                <span v-if="version_info.system.package_count === 0">
-                                    {{ $t('Machine.UpdatePanel.OSPackages') }}
-                                </span>
-                            </v-col>
-                            <v-col class="pr-6 text-right" align-self="center">
-                                <v-chip
-                                    small
-                                    label
-                                    outlined
-                                    :color="version_info.system.package_count ? 'primary' : 'green'"
-                                    :disabled="!version_info.system.package_count || printer_state === 'printing'"
-                                    class="minwidth-0 px-2 text-uppercase"
-                                    @click="updateSystem">
-                                    <v-icon small class="mr-1">
-                                        {{ version_info.system.package_count ? mdiProgressUpload : mdiCheck }}
-                                    </v-icon>
-                                    {{
-                                        version_info.system.package_count
-                                            ? $t('Machine.UpdatePanel.Upgrade')
-                                            : $t('Machine.UpdatePanel.UpToDate')
-                                    }}
-                                </v-chip>
-                            </v-col>
-                        </v-row>
+            <v-card-text class="px-0 py-0 update-manager-list">
+                <template v-if="checkInitState">
+                    <template v-for="(module, index) in modules">
+                        <v-divider v-if="index" :key="'divider_' + module.name" class="my-0" />
+                        <update-panel-entry :key="module.name" :repo="module.data" />
+                    </template>
+                    <template v-if="existsSystemModul">
+                        <v-divider v-if="modules.length" class="my-0" />
+                        <update-panel-entry-system />
                     </template>
                     <template v-if="showUpdateAll">
-                        <v-divider class="mb-0 mt-2 border-top-2"></v-divider>
-                        <v-row class="pt-3">
-                            <v-col class="text-center">
-                                <v-btn
-                                    text
-                                    color="primary"
-                                    small
-                                    :disabled="['printing', 'paused'].includes(printer_state)"
-                                    @click="updateAll">
-                                    <v-icon left>{{ mdiProgressUpload }}</v-icon>
-                                    {{ $t('Machine.UpdatePanel.UpdateAll') }}
-                                </v-btn>
-                            </v-col>
-                        </v-row>
+                        <v-divider class="mb-0 mt-2 border-top-2" />
+                        <update-panel-entry-all />
                     </template>
-                </v-container>
+                </template>
+                <template v-else>
+                    <v-row class="mt-0 mb-0">
+                        <v-col class="px-6">
+                            <v-alert class="mb-0" text dense type="info" border="left">
+                                {{ $t('Machine.UpdatePanel.InitUpdateManager') }}
+                            </v-alert>
+                        </v-col>
+                    </v-row>
+                </template>
             </v-card-text>
         </panel>
-        <v-dialog v-model="commitsOverlay.bool" persistent max-width="800">
-            <panel
-                :title="$t('Machine.UpdatePanel.Commits')"
-                :icon="mdiUpdate"
-                :margin-bottom="false"
-                card-class="machine-update-commits-dialog">
-                <template #buttons>
-                    <v-btn icon tile @click="commitsOverlay.bool = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text class="py-0 px-0">
-                    <overlay-scrollbars style="max-height: 400px" :options="{ overflowBehavior: { x: 'hidden' } }">
-                        <v-row>
-                            <v-col class="pt-3 pl-0">
-                                <v-timeline class="groupedCommits" align-top dense>
-                                    <v-timeline-item
-                                        v-for="group of commitsOverlay.groupedCommits"
-                                        :key="group.date.getTime()"
-                                        small>
-                                        <v-row class="pt-0">
-                                            <v-col class="pr-12">
-                                                <h3 class="caption">
-                                                    {{
-                                                        $t('Machine.UpdatePanel.CommitsOnDate', {
-                                                            date: new Date(group.date).toLocaleDateString(
-                                                                language,
-                                                                dateOptions
-                                                            ),
-                                                        })
-                                                    }}
-                                                </h3>
-                                                <ul class="commits mt-3 pl-0">
-                                                    <li
-                                                        v-for="commit of group.commits"
-                                                        :key="commit.sha"
-                                                        class="commit px-3 py-2">
-                                                        <v-row>
-                                                            <v-col>
-                                                                <h4 class="subtitle-2 text--white mb-0">
-                                                                    {{ commit.subject }}
-                                                                    <v-chip
-                                                                        v-if="!openCommits.includes(commit.sha)"
-                                                                        outlined
-                                                                        label
-                                                                        x-small
-                                                                        class="ml-2 px-2"
-                                                                        @click="openCommits.push(commit.sha)">
-                                                                        <v-icon small>{{ mdiDotsHorizontal }}</v-icon>
-                                                                    </v-chip>
-                                                                </h4>
-                                                                <p
-                                                                    v-if="openCommits.includes(commit.sha)"
-                                                                    class="caption text--secondary mb-2"
-                                                                    style="white-space: pre-line"
-                                                                    v-html="commit.message"></p>
-                                                                <p class="caption mb-0">
-                                                                    <span
-                                                                        class="font-weight-bold text-decoration-none white--text">
-                                                                        {{ commit.author }}
-                                                                    </span>
-                                                                    <span>{{ convertCommitDate(commit.date) }}</span>
-                                                                </p>
-                                                            </v-col>
-                                                            <v-col class="col-auto pt-4">
-                                                                <v-chip
-                                                                    outlined
-                                                                    label
-                                                                    small
-                                                                    :href="
-                                                                        'https://github.com/' +
-                                                                        commitsOverlay.owner +
-                                                                        '/' +
-                                                                        commitsOverlay.repoName +
-                                                                        '/commit/' +
-                                                                        commit.sha
-                                                                    "
-                                                                    target="_blank">
-                                                                    {{ commit.sha.substr(0, 6) }}
-                                                                </v-chip>
-                                                            </v-col>
-                                                        </v-row>
-                                                    </li>
-                                                </ul>
-                                            </v-col>
-                                        </v-row>
-                                    </v-timeline-item>
-                                </v-timeline>
-                            </v-col>
-                        </v-row>
-                    </overlay-scrollbars>
-                </v-card-text>
-            </panel>
-        </v-dialog>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '../../mixins/base'
-import semver from 'semver'
 import Panel from '@/components/ui/Panel.vue'
-import { ServerUpdateMangerStateVersionInfoGitRepoCommits } from '@/store/server/updateManager/types'
-import VueI18n from 'vue-i18n'
-import DateTimeFormatOptions = VueI18n.DateTimeFormatOptions
-import {
-    mdiRefresh,
-    mdiAlertCircle,
-    mdiCheck,
-    mdiHelpCircleOutline,
-    mdiInformation,
-    mdiMenuDown,
-    mdiProgressUpload,
-    mdiReload,
-    mdiDotsHorizontal,
-    mdiCloseThick,
-    mdiUpdate,
-} from '@mdi/js'
-
-interface groupedCommit {
-    date: Date
-    commits: ServerUpdateMangerStateVersionInfoGitRepoCommits[]
-}
-
-interface commitsOverlay {
-    bool: boolean
-    owner: string
-    modul: string
-    repoName: string
-    commits: ServerUpdateMangerStateVersionInfoGitRepoCommits[]
-    groupedCommits: groupedCommit[]
-}
+import UpdatePanelEntry from '@/components/panels/Machine/UpdatePanel/Entry.vue'
+import UpdatePanelEntrySystem from '@/components/panels/Machine/UpdatePanel/EntrySystem.vue'
+import UpdatePanelEntryAll from '@/components/panels/Machine/UpdatePanel/EntryAll.vue'
+import { mdiRefresh, mdiInformation, mdiCloseThick, mdiUpdate } from '@mdi/js'
+import { ServerUpdateManagerStateGuiList } from '@/store/server/updateManager/types'
+import semver from 'semver'
 
 @Component({
-    components: { Panel },
+    components: { Panel, UpdatePanelEntry, UpdatePanelEntrySystem, UpdatePanelEntryAll },
 })
 export default class UpdatePanel extends Mixins(BaseMixin) {
-    mdiCheck = mdiCheck
     mdiRefresh = mdiRefresh
     mdiInformation = mdiInformation
-    mdiMenuDown = mdiMenuDown
-    mdiReload = mdiReload
-    mdiProgressUpload = mdiProgressUpload
     mdiCloseThick = mdiCloseThick
-    mdiDotsHorizontal = mdiDotsHorizontal
     mdiUpdate = mdiUpdate
 
-    private openCommits: string[] = []
-
-    private dateOptions: DateTimeFormatOptions = {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
+    get enableUpdateManager() {
+        return this.$store.state.server.components.includes('update_manager')
     }
 
-    private commitsOverlay: commitsOverlay = {
-        bool: false,
-        owner: '',
-        modul: '',
-        repoName: '',
-        commits: [],
-        groupedCommits: [],
+    get modules() {
+        return this.$store.getters['server/updateManager/getUpdateManagerList'] ?? []
     }
 
-    get language() {
-        return this.$store.state.gui.general.language ?? 'en'
+    get existsSystemModul() {
+        return 'system' in this.$store.state.server.updateManager
     }
 
-    get enableUpdateManager() {
-        return this.$store.state.server.components.includes('update_manager')
+    get systemPackagesCount() {
+        return this.$store.state.server.updateManager?.system?.package_count ?? 0
     }
 
-    get version_info() {
-        return this.$store.state.server.updateManager.version_info
-    }
+    get checkInitState() {
+        const initModules = this.modules.filter(
+            (module: ServerUpdateManagerStateGuiList) => module.data.remote_version !== '?'
+        )
 
-    get updateableSoftwares() {
-        return this.$store.getters['server/updateManager/getUpdateableSoftwares']
+        return initModules.length > 0
     }
 
     get showUpdateAll() {
-        let updateableModuls = 0
+        let count = 0
 
-        Object.keys(this.updateableSoftwares).forEach((modulename) => {
-            const module = this.updateableSoftwares[modulename]
+        this.modules.forEach((module: ServerUpdateManagerStateGuiList) => {
+            // check git repos for updates
+            if (module.type === 'git' && module.data?.commits_behind?.length) {
+                count++
+                return
+            }
+
+            // check client web for updates
             if (
-                'version' in module &&
-                'remote_version' in module &&
-                semver.valid(module.remote_version) &&
-                semver.valid(module.version) &&
-                semver.gt(module.remote_version, module.version)
-            )
-                updateableModuls++
+                module.type === 'web' &&
+                semver.valid(module.data?.remote_version) &&
+                semver.valid(module.data?.version) &&
+                semver.gt(module.data?.remote_version, module.data?.version)
+            ) {
+                count++
+                return
+            }
         })
 
-        if (this.version_info?.system?.package_count > 0) updateableModuls++
-        return updateableModuls > 1
+        // check system packages for upgrades
+        if (this.systemPackagesCount > 0) count++
+
+        return count > 1
     }
 
     btnSync() {
         this.$socket.emit(
             'machine.update.status',
             { refresh: true },
-            { action: 'server/updateManager/getStatus', loading: 'loadingBtnSyncUpdateManager' }
+            { action: 'server/updateManager/onUpdateStatus', loading: 'loadingBtnSyncUpdateManager' }
         )
     }
-
-    getBtnColor(object: any) {
-        if (typeof object === 'object' && object !== false) {
-            if ('debug_enabled' in object && !object.debug_enabled && 'detached' in object && object.detached)
-                return 'orange'
-            if ('is_dirty' in object && object.is_dirty) return 'orange'
-            if ('is_valid' in object && !object.is_valid) return 'red'
-
-            if (
-                'version' in object &&
-                'remote_version' in object &&
-                semver.valid(object.remote_version) &&
-                semver.valid(object.version) &&
-                semver.gt(object.remote_version, object.version)
-            )
-                return 'primary'
-
-            if ((object.commits_behind ?? []).length) return 'primary'
-
-            if (
-                'version' in object &&
-                'remote_version' in object &&
-                (object.version === '?' || object.remote_version === '?')
-            )
-                return 'gray'
-
-            return 'green'
-        }
-
-        return 'red'
-    }
-
-    getBtnText(object: any) {
-        if (typeof object === 'object' && object !== false) {
-            if ('debug_enabled' in object && !object.debug_enabled && 'detached' in object && object.detached)
-                return this.$t('Machine.UpdatePanel.Detached')
-            if ('is_valid' in object && !object.is_valid) return this.$t('Machine.UpdatePanel.Invalid')
-            if ('is_dirty' in object && object.is_dirty) return this.$t('Machine.UpdatePanel.Dirty')
-
-            if (
-                'version' in object &&
-                'remote_version' in object &&
-                semver.valid(object.remote_version) &&
-                semver.valid(object.version) &&
-                semver.gt(object.remote_version, object.version)
-            )
-                return this.$t('Machine.UpdatePanel.Update')
-
-            if ((object.commits_behind ?? []).length) return this.$t('Machine.UpdatePanel.Update')
-
-            if (
-                'version' in object &&
-                'remote_version' in object &&
-                (object.version === '?' || object.remote_version === '?')
-            )
-                return this.$t('Machine.UpdatePanel.Unknown')
-
-            return this.$t('Machine.UpdatePanel.UpToDate')
-        }
-
-        return this.$t('Machine.UpdatePanel.ERROR')
-    }
-
-    getBtnIcon(object: any) {
-        if (typeof object === 'object' && object !== false) {
-            if ('debug_enabled' in object && !object.debug_enabled && 'detached' in object && object.detached)
-                return mdiAlertCircle
-            if ('is_valid' in object && !object.is_valid) return mdiAlertCircle
-            if ('is_dirty' in object && object.is_dirty) return mdiAlertCircle
-
-            if (
-                'version' in object &&
-                'remote_version' in object &&
-                semver.valid(object.remote_version) &&
-                semver.valid(object.version) &&
-                semver.gt(object.remote_version, object.version)
-            )
-                return mdiProgressUpload
-
-            if ((object.commits_behind ?? []).length) return mdiProgressUpload
-
-            if (
-                'version' in object &&
-                'remote_version' in object &&
-                (object.version === '?' || object.remote_version === '?')
-            )
-                return mdiHelpCircleOutline
-
-            return mdiCheck
-        }
-
-        return 'ERROR'
-    }
-
-    getBtnDisabled(object: any) {
-        if (['printing', 'paused'].includes(this.printer_state)) return true
-
-        if ('is_valid' in object && !object.is_valid) return false
-        if ('is_dirty' in object && object.is_dirty) return false
-
-        if (typeof object === 'object' && object !== false) {
-            if ((object.commits_behind ?? []).length) return false
-
-            if (
-                'version' in object &&
-                'remote_version' in object &&
-                semver.valid(object.remote_version) &&
-                semver.valid(object.version) &&
-                semver.gt(object.remote_version, object.version)
-            )
-                return false
-        }
-
-        return true
-    }
-
-    getVersionOutput(object: any) {
-        const local_version = object.version ?? '?'
-        const remote_version = object.remote_version ?? '?'
-        const commits_behind = object.commits_behind ?? []
-
-        let output = ''
-        if ('remote_alias' in object && object.remote_alias !== 'origin') output += object.remote_alias
-        if ('branch' in object && !['master', 'main'].includes(object.branch)) {
-            if (output !== '') output += '/'
-
-            output += object.branch
-        }
-        if (output !== '') output += ': '
-
-        if (semver.valid(remote_version) && semver.valid(local_version) && semver.gt(remote_version, local_version))
-            output += local_version + ' > ' + remote_version
-        else if (commits_behind.length)
-            output +=
-                local_version +
-                ' > ' +
-                this.$tc('Machine.UpdatePanel.CommitsAvailable', commits_behind.length, {
-                    count: commits_behind.length,
-                })
-        else if ('full_version_string' in object && object.full_version_string !== '?')
-            output += object.full_version_string
-        else output += local_version
-
-        return output
-    }
-
-    getVersionClickable(object: any) {
-        return 'commits_behind' in object && object.commits_behind.length
-    }
-
-    getRecoveryOptions(object: any) {
-        if ('is_valid' in object && !object.is_valid) return true
-        else if ('is_dirty' in object && object.is_dirty) return true
-
-        return false
-    }
-
-    updateAll() {
-        this.$socket.emit('machine.update.full', {})
-    }
-
-    updateModule(key: string) {
-        if (['klipper', 'moonraker'].includes(key)) this.$socket.emit('machine.update.' + key, {})
-        else this.$socket.emit('machine.update.client', { name: key })
-    }
-
-    recovery(name: string, hard: boolean) {
-        this.$socket.emit('machine.update.recover', { name: name, hard: hard })
-    }
-
-    updateSystem() {
-        this.$socket.emit('machine.update.system', {})
-    }
-
-    openCommitsOverlay(key: string, object: any) {
-        if ('commits_behind' in object && 'owner' in object && object.commits_behind.length) {
-            this.openCommits = []
-            this.commitsOverlay.owner = object.owner
-            this.commitsOverlay.modul = key
-            this.commitsOverlay.repoName = object.repo_name ?? key
-            this.commitsOverlay.commits = object.commits_behind
-            this.commitsOverlay.groupedCommits = []
-
-            let lastDate: null | Date = null
-            let tmpCommits: ServerUpdateMangerStateVersionInfoGitRepoCommits[] = []
-
-            object.commits_behind.forEach((commit: any) => {
-                const commitDate = new Date(commit.date * 1000)
-                if (
-                    lastDate === null ||
-                    commitDate.getFullYear() !== lastDate.getFullYear() ||
-                    commitDate.getMonth() !== lastDate.getMonth() ||
-                    commitDate.getDay() !== lastDate.getDay()
-                ) {
-                    if (tmpCommits.length && lastDate !== null) {
-                        this.commitsOverlay.groupedCommits.push({
-                            date: lastDate,
-                            commits: [...tmpCommits],
-                        })
-                    }
-
-                    lastDate = commitDate
-                    tmpCommits = []
-                }
-
-                tmpCommits.push(commit)
-            })
-
-            if (lastDate && tmpCommits.length) {
-                this.commitsOverlay.groupedCommits.push({
-                    date: lastDate,
-                    commits: [...tmpCommits],
-                })
-            }
-
-            this.commitsOverlay.bool = true
-        }
-    }
-
-    convertCommitDate(timestamp: number) {
-        const commitDay = new Date(timestamp * 1000)
-        commitDay.setHours(0, 0, 0, 0)
-        const todayDay = new Date()
-        todayDay.setHours(0, 0, 0, 0)
-        const diff = Math.floor(todayDay.getTime() - commitDay.getTime()) / (1000 * 60 * 60 * 24)
-
-        if (diff === 0) {
-            const diffHours = Math.floor((new Date().getTime() - timestamp * 1000) / (1000 * 60 * 60))
-
-            return this.$t('Machine.UpdatePanel.CommittedHoursAgo', { hours: diffHours })
-        } else if (diff === 1) return this.$t('Machine.UpdatePanel.CommittedYesterday')
-        else if (diff < 29) return this.$t('Machine.UpdatePanel.CommittedDaysAgo', { days: diff })
-        else
-            return this.$t('Machine.UpdatePanel.CommittedOnDate', {
-                date: commitDay.toLocaleDateString(this.language, this.dateOptions),
-            })
-    }
 }
 </script>
+
+<style scoped>
+::v-deep .update-manager-list > div:last-child > div.row {
+    padding-bottom: 0 !important;
+}
+</style>
diff --git a/src/components/panels/Machine/UpdatePanel/Entry.vue b/src/components/panels/Machine/UpdatePanel/Entry.vue
new file mode 100644
index 000000000..707199e96
--- /dev/null
+++ b/src/components/panels/Machine/UpdatePanel/Entry.vue
@@ -0,0 +1,366 @@
+<template>
+    <div>
+        <v-row class="py-2">
+            <v-col class="pl-6">
+                <strong>{{ repo.name }}</strong>
+                <br />
+                <template v-if="type === 'git_repo' && commitsBehind.length">
+                    <a class="primary--text cursor--pointer" @click="boolShowCommitList = true">
+                        <v-icon small color="primary" class="mr-1">{{ mdiInformation }}</v-icon>
+                        {{ versionOutput }}
+                    </a>
+                </template>
+                <template v-else-if="type === 'web' && webUpdatable">
+                    <a class="primary--text text-decoration-none" :href="webLinkRelease" target="_blank">
+                        <v-icon small color="primary" class="mr-1">{{ mdiInformation }}</v-icon>
+                        {{ versionOutput }}
+                    </a>
+                </template>
+                <span v-else>{{ versionOutput }}</span>
+            </v-col>
+            <v-col class="col-auto pr-6 text-right" align-self="center">
+                <template v-if="needsRecovery">
+                    <v-menu :offset-y="true">
+                        <template #activator="{ on, attrs }">
+                            <v-chip
+                                small
+                                label
+                                outlined
+                                :color="btnColor"
+                                :disabled="btnDisabled"
+                                class="minwidth-0 px-2 text-uppercase"
+                                v-bind="attrs"
+                                v-on="on">
+                                <v-icon small class="mr-1">{{ btnIcon }}</v-icon>
+                                {{ btnText }}
+                                <v-icon small>{{ mdiMenuDown }}</v-icon>
+                            </v-chip>
+                        </template>
+                        <v-list dense class="py-0">
+                            <v-list-item @click="doRecovery(false)">
+                                <v-list-item-icon class="mr-0">
+                                    <v-icon small>{{ mdiReload }}</v-icon>
+                                </v-list-item-icon>
+                                <v-list-item-content>
+                                    <v-list-item-title>{{ $t('Machine.UpdatePanel.SoftRecovery') }}</v-list-item-title>
+                                </v-list-item-content>
+                            </v-list-item>
+                            <v-list-item @click="doRecovery(true)">
+                                <v-list-item-icon class="mr-0">
+                                    <v-icon small>{{ mdiReload }}</v-icon>
+                                </v-list-item-icon>
+                                <v-list-item-content>
+                                    <v-list-item-title>{{ $t('Machine.UpdatePanel.HardRecovery') }}</v-list-item-title>
+                                </v-list-item-content>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </template>
+                <v-chip
+                    v-else
+                    small
+                    label
+                    outlined
+                    :color="btnColor"
+                    :disabled="btnDisabled"
+                    class="minwidth-0 px-2 text-uppercase"
+                    @click="clickUpdate">
+                    <v-icon small class="mr-1">{{ btnIcon }}</v-icon>
+                    {{ btnText }}
+                </v-chip>
+            </v-col>
+        </v-row>
+        <v-row v-if="notificationText" class="mt-0">
+            <v-col class="px-6 pt-0">
+                <v-alert text dense :color="notificationColor" :icon="notificationIcon" border="left">
+                    {{ notificationText }}
+                </v-alert>
+            </v-col>
+        </v-row>
+        <v-row v-if="gitMessages.length" class="mt-0">
+            <v-col class="px-6 pt-0">
+                <v-alert
+                    v-for="(message, index) in gitMessages"
+                    :key="'message_' + index"
+                    text
+                    dense
+                    border="left"
+                    type="info">
+                    {{ message }}
+                </v-alert>
+            </v-col>
+        </v-row>
+        <v-row v-if="warnings.length" class="mt-0">
+            <v-col class="px-6 pt-0">
+                <v-alert
+                    v-for="(message, index) in warnings"
+                    :key="'warnings_' + index"
+                    text
+                    dense
+                    border="left"
+                    color="orange"
+                    :icon="mdiAlertCircle">
+                    {{ message }}
+                </v-alert>
+            </v-col>
+        </v-row>
+        <git-commits-list
+            v-if="type === 'git_repo'"
+            :bool-show-dialog="boolShowCommitList"
+            :repo="repo"
+            @close-dialog="closeCommitList" />
+        <update-hint
+            :bool-show-dialog="boolShowUpdateHint"
+            :repo="repo"
+            @open-commit-history="boolShowCommitList = true"
+            @do-update="doUpdate"
+            @close-dialog="closeShowUpdateHint" />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerUpdateManagerStateGitRepo } from '@/store/server/updateManager/types'
+import {
+    mdiAlertCircle,
+    mdiCheck,
+    mdiHelpCircleOutline,
+    mdiInformation,
+    mdiMenuDown,
+    mdiProgressUpload,
+    mdiReload,
+} from '@mdi/js'
+import semver from 'semver'
+import GitCommitsList from '@/components/panels/Machine/UpdatePanel/GitCommitsList.vue'
+import UpdateHint from '@/components/panels/Machine/UpdatePanel/UpdateHint.vue'
+@Component({
+    components: { GitCommitsList, UpdateHint },
+})
+export default class UpdatePanelEntry extends Mixins(BaseMixin) {
+    mdiInformation = mdiInformation
+    mdiMenuDown = mdiMenuDown
+    mdiReload = mdiReload
+    mdiAlertCircle = mdiAlertCircle
+
+    boolShowCommitList = false
+    boolShowUpdateHint = false
+
+    @Prop({ required: true }) readonly repo!: ServerUpdateManagerStateGitRepo
+
+    get name() {
+        return this.repo.name ?? 'UNKNOWN'
+    }
+
+    get type() {
+        return this.repo.configured_type
+    }
+
+    get localVersion() {
+        const version = this.repo.version ?? '?'
+
+        if (!semver.valid(version)) return null
+
+        return version
+    }
+
+    get remoteVersion() {
+        const version = this.repo.remote_version ?? '?'
+
+        if (!semver.valid(version)) return null
+
+        return version
+    }
+
+    get branch() {
+        return this.repo.branch ?? 'master'
+    }
+
+    get remoteAlias() {
+        return this.repo.remote_alias ?? 'origin'
+    }
+
+    get branchOutput() {
+        if (this.remoteAlias !== 'origin') return `${this.remoteAlias}/${this.branch}`
+        if (!['master', 'main'].includes(this.branch)) return this.branch
+
+        return null
+    }
+
+    get commitsBehind() {
+        return this.repo.commits_behind ?? []
+    }
+
+    get fullVersionString() {
+        return this.repo.full_version_string ?? null
+    }
+
+    get versionOutput() {
+        let output = this.branchOutput ? `${this.branchOutput}: ` : ''
+
+        if (this.localVersion && this.remoteVersion && semver.gt(this.remoteVersion, this.localVersion)) {
+            return `${output}${this.localVersion} > ${this.remoteVersion}`
+        }
+
+        if (this.commitsBehind.length) {
+            const tmp = this.$tc('Machine.UpdatePanel.CommitsAvailable', this.commitsBehind.length, {
+                count: this.commitsBehind.length,
+            }).toString()
+
+            if (this.localVersion) return `${output}${this.localVersion} > ${tmp}`
+
+            return `${output}${tmp}`
+        }
+
+        if (this.fullVersionString) return this.fullVersionString
+        if (this.localVersion) return this.localVersion
+
+        return 'UNKNOWN'
+    }
+
+    get configuredType() {
+        return this.repo.configured_type ?? 'git_repo'
+    }
+
+    get isValid() {
+        return this.repo.is_valid ?? true
+    }
+
+    get isDirty() {
+        return this.repo.is_dirty ?? false
+    }
+
+    get debugEnabled() {
+        return this.repo.debug_enabled ?? false
+    }
+
+    get isDetached() {
+        if (this.configuredType !== 'git_repo') return false
+
+        return !this.debugEnabled && (this.repo.detached ?? false)
+    }
+
+    get needsRecovery() {
+        return !this.isValid || this.isDirty
+    }
+
+    get btnDisabled() {
+        if (['printing', 'paused'].includes(this.printer_state)) return true
+        if (!this.isValid || this.isDirty || this.commitsBehind.length) return false
+
+        return !(this.localVersion && this.remoteVersion && semver.gt(this.remoteVersion, this.localVersion))
+    }
+
+    get btnIcon() {
+        if (this.isDetached || !this.isValid || this.isDirty) return mdiAlertCircle
+
+        if (
+            this.commitsBehind.length ||
+            (this.localVersion && this.remoteVersion && semver.gt(this.remoteVersion, this.localVersion))
+        )
+            return mdiProgressUpload
+
+        if (this.localVersion === null || this.remoteVersion === null) return mdiHelpCircleOutline
+
+        return mdiCheck
+    }
+
+    get btnColor() {
+        if (this.isDetached || !this.isValid) return 'orange'
+        if (this.isDirty) return 'red'
+
+        if (
+            this.commitsBehind.length ||
+            (this.localVersion && this.remoteVersion && semver.gt(this.remoteVersion, this.localVersion))
+        )
+            return 'primary'
+
+        return 'green'
+    }
+
+    get btnText() {
+        if (this.isDetached) return this.$t('Machine.UpdatePanel.Detached')
+        if (!this.isValid) return this.$t('Machine.UpdatePanel.Invalid')
+        if (this.isDirty) return this.$t('Machine.UpdatePanel.Dirty')
+        if (
+            this.commitsBehind.length ||
+            (this.localVersion && this.remoteVersion && semver.gt(this.remoteVersion, this.localVersion))
+        )
+            return this.$t('Machine.UpdatePanel.Update')
+
+        if (this.localVersion === null || this.remoteVersion === null) return this.$t('Machine.UpdatePanel.Unknown')
+
+        return this.$t('Machine.UpdatePanel.UpToDate')
+    }
+
+    get notificationText() {
+        if (this.isDetached) return this.$t('Machine.UpdatePanel.Notification.Detached')
+        if (this.isDirty) return this.$t('Machine.UpdatePanel.Notification.Dirty')
+
+        return null
+    }
+
+    get notificationColor() {
+        return this.btnColor
+    }
+
+    get notificationIcon() {
+        return this.btnIcon
+    }
+
+    get gitMessages() {
+        return this.repo.git_messages ?? []
+    }
+
+    get warnings() {
+        return this.repo.warnings ?? []
+    }
+
+    get webUpdatable() {
+        if (!this.localVersion) return false
+        if (!this.remoteVersion) return false
+
+        return semver.gt(this.remoteVersion, this.localVersion)
+    }
+
+    get webLinkRelease() {
+        return `https://github.com/${this.repo.owner}/${this.repo.name}/releases/tag/${this.repo.remote_version}`
+    }
+
+    get hideUpdateWarning() {
+        return this.$store.state.gui.uiSettings.hideUpdateWarnings ?? false
+    }
+
+    clickUpdate() {
+        if (this.hideUpdateWarning) {
+            this.doUpdate()
+            return
+        }
+
+        this.boolShowUpdateHint = true
+    }
+
+    doUpdate() {
+        if (['klipper', 'moonraker'].includes(this.repo.name)) {
+            this.$socket.emit('machine.update.' + this.repo.name, {})
+            return
+        }
+
+        this.$socket.emit('machine.update.client', { name: this.repo.name })
+    }
+
+    doRecovery(hard: boolean) {
+        this.$socket.emit('machine.update.recover', { name: this.repo.name, hard: hard })
+    }
+
+    closeCommitList() {
+        this.boolShowCommitList = false
+    }
+
+    closeShowUpdateHint() {
+        this.boolShowUpdateHint = false
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/panels/Machine/UpdatePanel/EntryAll.vue b/src/components/panels/Machine/UpdatePanel/EntryAll.vue
new file mode 100644
index 000000000..3f1dce834
--- /dev/null
+++ b/src/components/panels/Machine/UpdatePanel/EntryAll.vue
@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <v-row class="pt-3">
+            <v-col class="text-center">
+                <v-btn
+                    text
+                    color="primary"
+                    small
+                    :disabled="['printing', 'paused'].includes(printer_state)"
+                    @click="clickUpdate">
+                    <v-icon left>{{ mdiProgressUpload }}</v-icon>
+                    {{ $t('Machine.UpdatePanel.UpdateAll') }}
+                </v-btn>
+            </v-col>
+        </v-row>
+        <update-hint-all
+            :bool-show-dialog="boolShowDialog"
+            @close-dialog="boolShowDialog = false"
+            @update-all="updateAll" />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiProgressUpload } from '@mdi/js'
+import UpdateHintAll from '@/components/panels/Machine/UpdatePanel/UpdateHintAll.vue'
+@Component({
+    components: { UpdateHintAll },
+})
+export default class UpdatePanelEntryAll extends Mixins(BaseMixin) {
+    mdiProgressUpload = mdiProgressUpload
+
+    boolShowDialog = false
+
+    get hideUpdateWarning() {
+        return this.$store.state.gui.uiSettings.hideUpdateWarnings ?? false
+    }
+
+    clickUpdate() {
+        if (this.hideUpdateWarning) {
+            this.updateAll()
+            return
+        }
+
+        this.boolShowDialog = true
+    }
+
+    updateAll() {
+        this.$socket.emit('machine.update.full', {})
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/panels/Machine/UpdatePanel/EntrySystem.vue b/src/components/panels/Machine/UpdatePanel/EntrySystem.vue
new file mode 100644
index 000000000..887f92119
--- /dev/null
+++ b/src/components/panels/Machine/UpdatePanel/EntrySystem.vue
@@ -0,0 +1,92 @@
+<template>
+    <div>
+        <v-row class="py-2">
+            <v-col class="pl-6">
+                <strong>{{ $t('Machine.UpdatePanel.System') }}</strong>
+                <br />
+                <template v-if="package_count">
+                    <a class="primary--text cursor--pointer" @click="boolShowPackageList = true">
+                        <v-icon small color="primary" class="mr-1">{{ mdiInformation }}</v-icon>
+                        {{ $t('Machine.UpdatePanel.CountPackagesCanBeUpgraded', { count: package_count }) }}
+                    </a>
+                </template>
+                <span v-else>{{ $t('Machine.UpdatePanel.OSPackages') }}</span>
+            </v-col>
+            <v-col class="col-auto pr-6 text-right" align-self="center">
+                <v-chip
+                    small
+                    label
+                    outlined
+                    :color="btnColor"
+                    :disabled="btnDisabled"
+                    class="minwidth-0 px-2 text-uppercase"
+                    @click="doUpdate">
+                    <v-icon small class="mr-1">{{ btnIcon }}</v-icon>
+                    {{ btnText }}
+                </v-chip>
+            </v-col>
+        </v-row>
+        <system-packages-list
+            :bool-show-dialog="boolShowPackageList"
+            :packages-list="package_list"
+            @close-dialog="closePackagesList" />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCheck, mdiInformation, mdiProgressUpload } from '@mdi/js'
+@Component
+export default class UpdatePanelEntrySystem extends Mixins(BaseMixin) {
+    mdiInformation = mdiInformation
+
+    // to display the dialog for packages
+    boolShowPackageList = false
+
+    get package_count() {
+        return this.$store.state.server.updateManager?.system?.package_count ?? 0
+    }
+
+    get package_list() {
+        return this.$store.state.server.updateManager?.system?.package_list ?? []
+    }
+
+    get btnDisabled() {
+        // disable button if the printer is printing
+        if (['printing', 'paused'].includes(this.printer_state)) return true
+
+        // disable button if no package is available to update
+        return this.package_count === 0
+    }
+
+    get btnIcon() {
+        if (this.package_count) return mdiProgressUpload
+
+        return mdiCheck
+    }
+
+    get btnColor() {
+        // set button to primary, if updates are available
+        if (this.package_count) return 'primary'
+
+        return 'green'
+    }
+
+    get btnText() {
+        if (this.package_count) return this.$t('Machine.UpdatePanel.Upgrade')
+
+        return this.$t('Machine.UpdatePanel.UpToDate')
+    }
+
+    doUpdate() {
+        this.$socket.emit('machine.update.system', {})
+    }
+
+    closePackagesList() {
+        this.boolShowPackageList = false
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/panels/Machine/UpdatePanel/GitCommitsList.vue b/src/components/panels/Machine/UpdatePanel/GitCommitsList.vue
new file mode 100644
index 000000000..cf1624b40
--- /dev/null
+++ b/src/components/panels/Machine/UpdatePanel/GitCommitsList.vue
@@ -0,0 +1,164 @@
+<template>
+    <v-dialog v-model="boolShowDialog" persistent max-width="800">
+        <panel
+            :title="$t('Machine.UpdatePanel.Commits')"
+            :icon="mdiUpdate"
+            :margin-bottom="false"
+            card-class="machine-update-commits-dialog">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text class="py-0 px-0">
+                <overlay-scrollbars style="max-height: 400px" :options="{ overflowBehavior: { x: 'hidden' } }">
+                    <v-row>
+                        <v-col>
+                            <v-timeline class="groupedCommits" align-top dense>
+                                <git-commits-list-day
+                                    v-for="group of groupedCommits"
+                                    :key="group.date.getTime()"
+                                    :repo="repo"
+                                    :grouped-commits="group" />
+                                <v-timeline-item
+                                    v-if="displayFullHistoryWaring"
+                                    small
+                                    class="git-commit-list-day git-commit-list-warning">
+                                    <v-row class="pt-0">
+                                        <v-col class="pr-12">
+                                            <v-alert dense text type="info">
+                                                <p>{{ $t('Machine.UpdatePanel.MoreCommitsInfo') }}</p>
+                                                <div class="text-center mb-3">
+                                                    <v-btn :href="linkToGithub" target="_blank">
+                                                        {{ $t('Machine.UpdatePanel.LinkToGithub') }}
+                                                    </v-btn>
+                                                </div>
+                                            </v-alert>
+                                        </v-col>
+                                    </v-row>
+                                </v-timeline-item>
+                            </v-timeline>
+                        </v-col>
+                    </v-row>
+                </overlay-scrollbars>
+            </v-card-text>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import {
+    ServerUpdateManagerStateGitRepo,
+    ServerUpdateManagerStateGitRepoCommit,
+    ServerUpdateManagerStateGitRepoGroupedCommits,
+} from '@/store/server/updateManager/types'
+import { mdiUpdate, mdiCloseThick } from '@mdi/js'
+import Panel from '@/components/ui/Panel.vue'
+import GitCommitsListDay from '@/components/panels/Machine/UpdatePanel/GitCommitsListDay.vue'
+
+@Component({
+    components: { GitCommitsListDay, Panel },
+})
+export default class GitCommitsList extends Mixins(BaseMixin) {
+    mdiUpdate = mdiUpdate
+    mdiCloseThick = mdiCloseThick
+
+    @Prop({ required: true }) readonly boolShowDialog!: boolean
+    @Prop({ required: true }) readonly repo!: ServerUpdateManagerStateGitRepo | null
+
+    get commitsBehind(): ServerUpdateManagerStateGitRepoCommit[] {
+        return this.repo?.commits_behind ?? []
+    }
+
+    get groupedCommits() {
+        let output: ServerUpdateManagerStateGitRepoGroupedCommits[] = []
+        let lastCommit: ServerUpdateManagerStateGitRepoCommit | null = null
+
+        this.commitsBehind.forEach((commit: any) => {
+            const lastCommitDate = new Date((lastCommit?.date ?? 0) * 1000)
+            const commitDate = new Date(commit.date * 1000)
+
+            if (
+                commitDate.getFullYear() !== lastCommitDate.getFullYear() ||
+                commitDate.getMonth() !== lastCommitDate.getMonth() ||
+                commitDate.getDay() !== lastCommitDate.getDay()
+            ) {
+                output.push({
+                    date: commitDate,
+                    commits: [],
+                })
+            }
+
+            output[output.length - 1].commits.push(commit)
+            lastCommit = commit
+        })
+
+        return output
+    }
+
+    get displayFullHistoryWaring() {
+        return this.commitsBehind.length >= 30
+    }
+
+    get lastCommit() {
+        return this.commitsBehind.slice(-1)[0]
+    }
+
+    get linkToGithub() {
+        return `https://github.com/${this.repo?.owner}/${this.repo?.name}/commits/${this.repo?.branch}/?after=${this.lastCommit?.sha}+0`
+    }
+
+    closeDialog() {
+        this.$emit('close-dialog')
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.groupedCommits {
+    padding-top: 0;
+}
+
+::v-deep {
+    .git-commit-list-day {
+        padding-top: 24px;
+        padding-bottom: 0;
+
+        .v-timeline-item__dot--small {
+            width: 18px;
+            height: 15px;
+            margin-top: 2px;
+
+            &:before {
+                display: block;
+                content: ' ';
+                position: relative;
+                width: 18px;
+                height: 2px;
+                top: 7px;
+                background: rgba(255, 255, 255, 0.5);
+                z-index: 1;
+            }
+        }
+
+        .v-timeline-item__inner-dot {
+            background-color: #1e1e1e !important;
+            border: 2px solid rgba(255, 255, 255, 0.5) !important;
+            width: 8px;
+            height: 8px;
+            position: relative;
+            z-index: 2;
+            margin-left: 5px;
+            margin-top: 2px;
+        }
+
+        &.git-commit-list-warning {
+            .v-timeline-item__dot--small {
+                margin-top: 10px;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/components/panels/Machine/UpdatePanel/GitCommitsListDay.vue b/src/components/panels/Machine/UpdatePanel/GitCommitsListDay.vue
new file mode 100644
index 000000000..a7012e074
--- /dev/null
+++ b/src/components/panels/Machine/UpdatePanel/GitCommitsListDay.vue
@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <v-timeline-item small class="git-commit-list-day">
+            <v-row class="pt-0">
+                <v-col class="pr-12">
+                    <h3 class="caption">
+                        {{ $t('Machine.UpdatePanel.CommitsOnDate', { date: groupedCommitsDate }) }}
+                    </h3>
+                    <ul class="commits mt-3 pl-0">
+                        <git-commits-list-day-commit
+                            v-for="commit of groupedCommits.commits"
+                            :key="commit.sha"
+                            :commit="commit"
+                            :repo="repo" />
+                    </ul>
+                </v-col>
+            </v-row>
+        </v-timeline-item>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import {
+    ServerUpdateManagerStateGitRepo,
+    ServerUpdateManagerStateGitRepoGroupedCommits,
+} from '@/store/server/updateManager/types'
+import Panel from '@/components/ui/Panel.vue'
+import GitCommitsListDayCommit from '@/components/panels/Machine/UpdatePanel/GitCommitsListDayCommit.vue'
+
+@Component({
+    components: { Panel, GitCommitsListDayCommit },
+})
+export default class GitCommitsListDay extends Mixins(BaseMixin) {
+    @Prop({ required: true }) readonly groupedCommits!: ServerUpdateManagerStateGitRepoGroupedCommits
+    @Prop({ required: true }) readonly repo!: ServerUpdateManagerStateGitRepo
+
+    get groupedCommitsDate() {
+        return new Date(this.groupedCommits.date).toLocaleDateString(this.browserLocale, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        })
+    }
+}
+</script>
+
+<style scoped>
+ul.commits {
+    list-style: none;
+}
+</style>
diff --git a/src/components/panels/Machine/UpdatePanel/GitCommitsListDayCommit.vue b/src/components/panels/Machine/UpdatePanel/GitCommitsListDayCommit.vue
new file mode 100644
index 000000000..47df5d42e
--- /dev/null
+++ b/src/components/panels/Machine/UpdatePanel/GitCommitsListDayCommit.vue
@@ -0,0 +1,116 @@
+<template>
+    <li class="commit px-3 py-2">
+        <v-row>
+            <v-col>
+                <h4 class="subtitle-2 text--white mb-0">
+                    {{ title }}
+                    <v-chip outlined label x-small class="ml-2 px-2" @click="showDetails = !showDetails">
+                        <v-icon small>{{ mdiDotsHorizontal }}</v-icon>
+                    </v-chip>
+                </h4>
+                <p
+                    v-if="showDetails"
+                    class="caption text--secondary mb-2"
+                    style="white-space: pre-line"
+                    v-html="message"></p>
+                <p class="caption mb-0">
+                    <span class="font-weight-bold text-decoration-none white--text">
+                        {{ author }}
+                    </span>
+                    <span>{{ commitFormatDate }}</span>
+                </p>
+            </v-col>
+            <v-col class="col-auto pt-4">
+                <v-chip outlined label small :href="commitHref" target="_blank">
+                    {{ commitShortSha }}
+                </v-chip>
+            </v-col>
+        </v-row>
+    </li>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiDotsHorizontal } from '@mdi/js'
+import {
+    ServerUpdateManagerStateGitRepo,
+    ServerUpdateManagerStateGitRepoCommit,
+} from '@/store/server/updateManager/types'
+import Panel from '@/components/ui/Panel.vue'
+
+@Component({
+    components: { Panel },
+})
+export default class GitCommitsListDayCommit extends Mixins(BaseMixin) {
+    mdiDotsHorizontal = mdiDotsHorizontal
+
+    @Prop({ required: true }) readonly commit!: ServerUpdateManagerStateGitRepoCommit
+    @Prop({ required: true }) readonly repo!: ServerUpdateManagerStateGitRepo
+
+    showDetails = false
+
+    get title() {
+        return this.commit.subject
+    }
+
+    get message() {
+        return this.commit.message
+    }
+
+    get author() {
+        return this.commit.author
+    }
+
+    get commitFormatDate() {
+        const commitDay = new Date(this.commit.date * 1000)
+        commitDay.setHours(0, 0, 0, 0)
+        const todayDay = new Date()
+        todayDay.setHours(0, 0, 0, 0)
+        const diff = Math.floor(todayDay.getTime() - commitDay.getTime()) / (1000 * 60 * 60 * 24)
+
+        if (diff === 0) {
+            const diffHours = Math.floor((new Date().getTime() - this.commit.date * 1000) / (1000 * 60 * 60))
+
+            return this.$t('Machine.UpdatePanel.CommittedHoursAgo', { hours: diffHours })
+        } else if (diff === 1) return this.$t('Machine.UpdatePanel.CommittedYesterday')
+        else if (diff < 29) return this.$t('Machine.UpdatePanel.CommittedDaysAgo', { days: diff })
+        else
+            return this.$t('Machine.UpdatePanel.CommittedOnDate', {
+                date: commitDay.toLocaleDateString(this.browserLocale, {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                }),
+            })
+    }
+
+    get commitHref() {
+        return `https://github.com/${this.repo.owner}/${this.repo.name}/commit/${this.commit.sha}`
+    }
+
+    get commitShortSha() {
+        return this.commit.sha.substring(0, 6)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+li.commit {
+    border-color: rgb(48, 54, 61);
+    border-style: solid;
+    border-width: 1px;
+    border-bottom-width: 0;
+
+    &:first-child {
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+    }
+
+    &:last-child {
+        border-bottom-width: 1px;
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+    }
+}
+</style>
diff --git a/src/components/panels/Machine/UpdatePanel/SystemPackagesList.vue b/src/components/panels/Machine/UpdatePanel/SystemPackagesList.vue
new file mode 100644
index 000000000..1faedafc6
--- /dev/null
+++ b/src/components/panels/Machine/UpdatePanel/SystemPackagesList.vue
@@ -0,0 +1,56 @@
+<template>
+    <v-dialog v-model="boolShowDialog" persistent max-width="800">
+        <panel
+            :title="$t('Machine.UpdatePanel.UpgradeableSystemPackages')"
+            :icon="mdiPackageVariantClosed"
+            :margin-bottom="false"
+            card-class="machine-update-system-packages-list-dialog">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <v-row>
+                    <v-col>
+                        <p>{{ $t('Machine.UpdatePanel.ThesePackagesCanBeUpgrade') }}</p>
+                        <p class="system-packages-list">{{ packagesList.join(', ') }}</p>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text color="primary" @click="closeDialog">{{ $t('Machine.UpdatePanel.Close') }}</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 { mdiCloseThick, mdiPackageVariantClosed } from '@mdi/js'
+import Panel from '@/components/ui/Panel.vue'
+
+@Component({
+    components: { Panel },
+})
+export default class SystemPackagesList extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiPackageVariantClosed = mdiPackageVariantClosed
+
+    @Prop({ required: true }) readonly boolShowDialog!: boolean
+    @Prop({ required: true }) readonly packagesList!: string[]
+
+    closeDialog() {
+        this.$emit('close-dialog')
+    }
+}
+</script>
+
+<style scoped>
+.system-packages-list {
+    font-family: monospace;
+    margin-bottom: 0 !important;
+}
+</style>
diff --git a/src/components/panels/Machine/UpdatePanel/UpdateHint.vue b/src/components/panels/Machine/UpdatePanel/UpdateHint.vue
new file mode 100644
index 000000000..8720e2f77
--- /dev/null
+++ b/src/components/panels/Machine/UpdatePanel/UpdateHint.vue
@@ -0,0 +1,71 @@
+<template>
+    <v-dialog v-model="boolShowDialog" persistent max-width="600">
+        <panel
+            :title="$t('Machine.UpdatePanel.AreYouSure')"
+            :icon="mdiProgressQuestion"
+            :margin-bottom="false"
+            card-class="machine-update-hint-dialog">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <v-row>
+                    <v-col>
+                        <update-hint-alert :repo="repo" @open-commit-history="openCommitHistory" />
+                        <div>
+                            <v-checkbox
+                                v-model="checkboxUpdateQuestion"
+                                :label="$t('Machine.UpdatePanel.IUnderstandTheRisks')"
+                                hide-details />
+                        </div>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            <v-divider />
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closeDialog">{{ $t('Machine.UpdatePanel.Abort') }}</v-btn>
+                <v-btn text color="primary" :disabled="!checkboxUpdateQuestion" @click="doUpdate">
+                    {{ $t('Machine.UpdatePanel.StartUpdate') }}
+                </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 { ServerUpdateManagerStateGitRepo } from '@/store/server/updateManager/types'
+import { mdiProgressQuestion, mdiCloseThick } from '@mdi/js'
+import Panel from '@/components/ui/Panel.vue'
+import GitCommitsListDay from '@/components/panels/Machine/UpdatePanel/GitCommitsListDay.vue'
+import UpdateHintAlert from '@/components/panels/Machine/UpdatePanel/UpdateHintAlert.vue'
+
+@Component({
+    components: { GitCommitsListDay, Panel, UpdateHintAlert },
+})
+export default class UpdateHint extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiProgressQuestion = mdiProgressQuestion
+
+    checkboxUpdateQuestion = false
+
+    @Prop({ required: true }) readonly boolShowDialog!: boolean
+    @Prop({ required: true }) readonly repo!: ServerUpdateManagerStateGitRepo
+
+    doUpdate() {
+        this.$emit('do-update')
+    }
+
+    openCommitHistory() {
+        this.$emit('open-commit-history')
+    }
+
+    closeDialog() {
+        this.$emit('close-dialog')
+    }
+}
+</script>
diff --git a/src/components/panels/Machine/UpdatePanel/UpdateHintAlert.vue b/src/components/panels/Machine/UpdatePanel/UpdateHintAlert.vue
new file mode 100644
index 000000000..15a38f9e1
--- /dev/null
+++ b/src/components/panels/Machine/UpdatePanel/UpdateHintAlert.vue
@@ -0,0 +1,91 @@
+<template>
+    <v-alert text dense border="left" color="orange" :icon="mdiAlertCircle">
+        <template v-if="boolTitle">
+            <strong>{{ $t('Machine.UpdatePanel.UpdateWarning', { name: formatName }) }}</strong>
+            <br />
+        </template>
+        <p v-if="description1">{{ description1 }}</p>
+        <p v-if="description2">{{ description2 }}</p>
+        <div class="text-center">
+            <v-btn
+                v-if="configured_type === 'git_repo' && repo.commits_behind?.length"
+                class="mx-2 mt-3 mt-sm-0"
+                @click="openCommitHistory">
+                <v-icon left small>{{ mdiEye }}</v-icon>
+                {{ $t('Machine.UpdatePanel.CommitHistory') }}
+            </v-btn>
+            <v-btn v-if="externalLink" class="mx-2 mt-3 mt-sm-0" :href="externalLink" target="_blank">
+                <v-icon left small>{{ mdiOpenInNew }}</v-icon>
+                {{ externalLinkText }}
+            </v-btn>
+        </div>
+    </v-alert>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerUpdateManagerStateGitRepo } from '@/store/server/updateManager/types'
+import { mdiCloseThick, mdiAlertCircle, mdiEye, mdiOpenInNew } from '@mdi/js'
+import Panel from '@/components/ui/Panel.vue'
+import GitCommitsListDay from '@/components/panels/Machine/UpdatePanel/GitCommitsListDay.vue'
+import { capitalize } from '@/plugins/helpers'
+
+@Component({
+    components: { GitCommitsListDay, Panel },
+})
+export default class UpdateHintAlert extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiAlertCircle = mdiAlertCircle
+    mdiEye = mdiEye
+    mdiOpenInNew = mdiOpenInNew
+
+    @Prop({ required: true }) readonly repo!: ServerUpdateManagerStateGitRepo
+    @Prop({ required: false, default: false }) readonly boolTitle!: boolean
+
+    get name() {
+        return this.repo?.name ?? 'UNKNOWN'
+    }
+
+    get formatName() {
+        return capitalize(this.name)
+    }
+
+    get configured_type() {
+        return this.repo?.configured_type ?? 'UNKNOWN'
+    }
+
+    get description1() {
+        if (this.name === 'klipper') return this.$t('Machine.UpdatePanel.KlipperUpdateQuestionFirmware')
+        if (this.name === 'moonraker') return this.$t('Machine.UpdatePanel.MoonrakerUpdateQuestion')
+        if (this.configured_type === 'web') return this.$t('Machine.UpdatePanel.WebClientUpdateQuestion')
+
+        return this.$t('Machine.UpdatePanel.GenericUpdateQuestion')
+    }
+
+    get description2() {
+        if (this.name === 'klipper') return this.$t('Machine.UpdatePanel.KlipperUpdateQuestionConfig')
+
+        return null
+    }
+
+    get externalLink() {
+        if (this.name === 'klipper') return '//www.klipper3d.org/Config_Changes.html'
+        if (this.name === 'moonraker') return '//moonraker.readthedocs.io/en/latest/changelog/'
+        if (this.repo?.configured_type === 'web')
+            return `//github.com/${this.repo.owner}/${this.repo.name}/releases/tag/${this.repo.remote_version}`
+
+        return `//github.com/${this.repo.owner}/${this.repo.name}`
+    }
+
+    get externalLinkText() {
+        if (['klipper', 'moonraker'].includes(this.name)) return this.$t('Machine.UpdatePanel.ConfigChanges')
+
+        return this.$t('Machine.UpdatePanel.GitHubPage')
+    }
+
+    openCommitHistory() {
+        this.$emit('open-commit-history')
+    }
+}
+</script>
diff --git a/src/components/panels/Machine/UpdatePanel/UpdateHintAll.vue b/src/components/panels/Machine/UpdatePanel/UpdateHintAll.vue
new file mode 100644
index 000000000..87c3f7f27
--- /dev/null
+++ b/src/components/panels/Machine/UpdatePanel/UpdateHintAll.vue
@@ -0,0 +1,105 @@
+<template>
+    <v-dialog v-model="boolShowDialog" persistent max-width="600">
+        <panel
+            :title="$t('Machine.UpdatePanel.AreYouSure')"
+            :icon="mdiProgressQuestion"
+            :margin-bottom="false"
+            card-class="machine-update-hint-dialog">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <v-row>
+                    <v-col>
+                        <update-hint-alert
+                            v-for="repo of filteredModules"
+                            :key="repo.name"
+                            :repo="repo.data"
+                            :bool-title="true"
+                            @open-commit-history="openCommitHistory(repo.data)" />
+                        <div>
+                            <v-checkbox
+                                v-model="checkboxUpdateQuestion"
+                                :label="$t('Machine.UpdatePanel.IUnderstandTheRisks')"
+                                hide-details />
+                        </div>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            <v-divider />
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closeDialog">{{ $t('Machine.UpdatePanel.Abort') }}</v-btn>
+                <v-btn text color="primary" :disabled="!checkboxUpdateQuestion" @click="updateAll">
+                    {{ $t('Machine.UpdatePanel.StartUpdate') }}
+                </v-btn>
+            </v-card-actions>
+        </panel>
+        <git-commits-list
+            :bool-show-dialog="boolShowCommitHistory"
+            :repo="showCommitsRepo"
+            @close-dialog="boolShowCommitHistory = false" />
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerUpdateManagerStateGitRepo, ServerUpdateManagerStateGuiList } from '@/store/server/updateManager/types'
+import { mdiProgressQuestion, mdiCloseThick } from '@mdi/js'
+import Panel from '@/components/ui/Panel.vue'
+import GitCommitsListDay from '@/components/panels/Machine/UpdatePanel/GitCommitsListDay.vue'
+import UpdateHintAlert from '@/components/panels/Machine/UpdatePanel/UpdateHintAlert.vue'
+import semver from 'semver'
+
+@Component({
+    components: { GitCommitsListDay, Panel, UpdateHintAlert },
+})
+export default class UpdateHintAll extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiProgressQuestion = mdiProgressQuestion
+
+    checkboxUpdateQuestion = false
+    boolShowCommitHistory = false
+    showCommitsRepo: ServerUpdateManagerStateGitRepo | null = null
+
+    @Prop({ required: true }) readonly boolShowDialog!: boolean
+
+    get modules() {
+        return this.$store.getters['server/updateManager/getUpdateManagerList'] ?? []
+    }
+
+    get filteredModules() {
+        return this.modules.filter((module: ServerUpdateManagerStateGuiList) => {
+            // check git repos for updates
+            if (module.type === 'git' && module.data?.commits_behind?.length) return true
+
+            // check client web for updates
+            if (
+                module.type === 'web' &&
+                semver.valid(module.data?.remote_version) &&
+                semver.valid(module.data?.version) &&
+                semver.gt(module.data?.remote_version, module.data?.version)
+            )
+                return true
+
+            return false
+        })
+    }
+
+    openCommitHistory(repo: ServerUpdateManagerStateGitRepo) {
+        this.showCommitsRepo = repo
+        this.boolShowCommitHistory = true
+    }
+
+    closeDialog() {
+        this.$emit('close-dialog')
+    }
+
+    updateAll() {
+        this.$emit('update-all')
+    }
+}
+</script>
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index 190e6ab0b..a7e793541 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -185,7 +185,7 @@ export default class StatusPanel extends Mixins(BaseMixin) {
     }
 
     get printPercent() {
-        return Math.round(this.$store.getters['printer/getPrintPercent'] * 100)
+        return Math.floor(this.$store.getters['printer/getPrintPercent'] * 100)
     }
 
     get printerStateOutput() {
diff --git a/src/components/panels/Temperature/TemperaturePanelList.vue b/src/components/panels/Temperature/TemperaturePanelList.vue
new file mode 100644
index 000000000..837feb0f9
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelList.vue
@@ -0,0 +1,137 @@
+<template>
+    <responsive
+        :breakpoints="{
+            mobile: (el) => el.width <= 395,
+        }">
+        <template #default="{ el }">
+            <v-simple-table class="temperature-panel-table">
+                <thead>
+                    <tr>
+                        <th class="icon">&nbsp;</th>
+                        <th class="name">{{ $t('Panels.TemperaturePanel.Name') }}</th>
+                        <th v-if="!el.is.mobile" class="state">
+                            {{ $t('Panels.TemperaturePanel.State') }}
+                        </th>
+                        <th class="current">
+                            {{ $t('Panels.TemperaturePanel.Current') }}
+                        </th>
+                        <th class="target">
+                            {{ $t('Panels.TemperaturePanel.Target') }}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <temperature-panel-list-item
+                        v-for="objectName in tempObjects"
+                        :key="objectName"
+                        :object-name="objectName"
+                        :is-responsive-mobile="el.is.mobile ?? false" />
+                </tbody>
+            </v-simple-table>
+        </template>
+    </responsive>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class TemperaturePanelList extends Mixins(BaseMixin) {
+    get available_heaters() {
+        return this.$store.state.printer?.heaters?.available_heaters ?? []
+    }
+
+    get filteredHeaters() {
+        return this.available_heaters
+            .filter((fullName: string) => {
+                const splits = fullName.split(' ')
+                let name = splits[0]
+                if (splits.length > 1) name = splits[1]
+
+                return !name.startsWith('_')
+            })
+            .sort(this.sortObjectName)
+    }
+
+    get available_sensors() {
+        return this.$store.state.printer?.heaters?.available_sensors ?? []
+    }
+
+    get temperature_fans() {
+        return this.available_sensors
+            .filter((name: string) => name.startsWith('temperature_fan') && !name.startsWith('temperature_fan _'))
+            .sort(this.sortObjectName)
+    }
+
+    get temperature_sensors() {
+        return this.available_sensors
+            .filter((fullName: string) => {
+                if (this.available_heaters.includes(fullName)) return false
+                if (this.temperature_fans.includes(fullName)) return false
+
+                const splits = fullName.split(' ')
+                let name = splits[0]
+                if (splits.length > 1) name = splits[1]
+
+                return !name.startsWith('_')
+            })
+            .sort(this.sortObjectName)
+    }
+
+    get tempObjects() {
+        return [...this.filteredHeaters, ...this.temperature_fans, ...this.temperature_sensors]
+    }
+
+    sortObjectName(a: string, b: string) {
+        const splitsA = a.split(' ')
+        let nameA = splitsA[0]
+        if (splitsA.length > 1) nameA = splitsA[1]
+        nameA = nameA.toUpperCase()
+
+        const splitsB = b.split(' ')
+        let nameB = splitsB[0]
+        if (splitsB.length > 1) nameB = splitsB[1]
+        nameB = nameB.toUpperCase()
+
+        if (nameA < nameB) return -1
+        if (nameA > nameB) return 1
+
+        return 0
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.temperature-panel-table th,
+.temperature-panel-table ::v-deep td {
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+    height: auto !important;
+}
+
+.temperature-panel-table ::v-deep tr:hover {
+    background: none !important;
+}
+
+.temperature-panel-table ::v-deep .icon {
+    width: 24px;
+    padding-right: 0 !important;
+    text-align: center;
+}
+
+.temperature-panel-table ::v-deep .state {
+    width: 100px;
+    text-align: right !important;
+}
+
+.temperature-panel-table ::v-deep .current {
+    width: 100px;
+    text-align: right !important;
+}
+
+.temperature-panel-table ::v-deep .target {
+    width: 140px;
+}
+</style>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItem.vue b/src/components/panels/Temperature/TemperaturePanelListItem.vue
new file mode 100644
index 000000000..ca7c16542
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItem.vue
@@ -0,0 +1,274 @@
+<template>
+    <tr>
+        <td class="icon">
+            <v-icon :color="iconColor" :class="iconClass" tabindex="-1" @click="showEditDialog = true">
+                {{ icon }}
+            </v-icon>
+        </td>
+        <td class="name">
+            <span @click="showEditDialog = true">{{ formatName }}</span>
+        </td>
+        <td v-if="!isResponsiveMobile" class="state">
+            <v-tooltip v-if="state !== null" top>
+                <template #activator="{ on, attrs }">
+                    <div v-bind="attrs" v-on="on">{{ formatState }}</div>
+                </template>
+                <span>{{ $t('Panels.TemperaturePanel.Avg') }}: {{ avgState }} %</span>
+            </v-tooltip>
+        </td>
+        <td class="current">
+            <v-tooltip top :disabled="!(measured_min_temp !== null || measured_max_temp !== null)">
+                <template #activator="{ on, attrs }">
+                    <span style="cursor: default" v-bind="attrs" v-on="on">
+                        {{ formatTemperature }}
+                    </span>
+                </template>
+                <span>
+                    {{ $t('Panels.TemperaturePanel.Max') }}: {{ measured_max_temp }}°C
+                    <br />
+                    {{ $t('Panels.TemperaturePanel.Min') }}: {{ measured_min_temp }}°C
+                </span>
+            </v-tooltip>
+            <div v-if="rpm !== null">
+                <small :class="rpmClass">{{ rpm }} RPM</small>
+            </div>
+            <temperature-panel-list-item-additional-sensor
+                v-if="additionalSensorName"
+                :object-name="objectName"
+                :additional-object-name="additionalSensorName" />
+        </td>
+        <td class="target">
+            <temperature-input
+                v-if="command !== null"
+                :name="name"
+                :target="target"
+                :presets="presets"
+                :min_temp="min_temp"
+                :max_temp="max_temp"
+                :command="command"
+                :attribute-name="commandAttributeName" />
+        </td>
+        <temperature-panel-list-item-edit
+            :bool-show="showEditDialog"
+            :object-name="objectName"
+            :name="name"
+            :format-name="formatName"
+            :additional-sensor-name="additionalSensorName"
+            :icon="icon"
+            :color="color"
+            @close-dialog="showEditDialog = false" />
+    </tr>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { convertName } from '@/plugins/helpers'
+import {
+    mdiFan,
+    mdiFire,
+    mdiPrinter3dNozzle,
+    mdiPrinter3dNozzleAlert,
+    mdiRadiator,
+    mdiRadiatorDisabled,
+    mdiThermometer,
+} from '@mdi/js'
+import { additionalSensors, opacityHeaterActive, opacityHeaterInactive } from '@/store/variables'
+
+@Component
+export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: Boolean, required: true }) readonly isResponsiveMobile!: boolean
+
+    showEditDialog = false
+
+    get printerObject() {
+        if (!(this.objectName in this.$store.state.printer)) return {}
+
+        return this.$store.state.printer[this.objectName]
+    }
+
+    get printerObjectSettings() {
+        if (!(this.objectName in (this.$store.state.printer?.configfile?.settings ?? {}))) return {}
+
+        return this.$store.state.printer?.configfile?.settings[this.objectName]
+    }
+
+    get name() {
+        const splits = this.objectName.split(' ')
+        if (splits.length === 1) return this.objectName
+
+        return splits[1]
+    }
+
+    get formatName() {
+        return convertName(this.name)
+    }
+
+    get icon() {
+        // handle extruder icons
+        if (this.objectName.startsWith('extruder')) {
+            if (this.printerObject.can_extrude ?? false) return mdiPrinter3dNozzle
+
+            return mdiPrinter3dNozzleAlert
+        }
+
+        // show heater_bed icon
+        if (this.objectName === 'heater_bed') {
+            if (
+                (this.temperature !== null && this.temperature > 50) ||
+                (this.target && this.temperature && this.temperature > this.target - 5)
+            )
+                return mdiRadiator
+
+            return mdiRadiatorDisabled
+        }
+
+        // show heater_generic icon
+        if (this.objectName.startsWith('heater_generic')) return mdiFire
+
+        // show fan icon, if it is a fan
+        if (this.isFan) return mdiFan
+
+        return mdiThermometer
+    }
+
+    get color() {
+        return this.$store.getters['printer/tempHistory/getDatasetColor'](this.objectName)
+    }
+
+    get iconColor() {
+        // set icon color to active, if no target exists (temperature_sensors) or a heater is active
+        if (this.target === null || this.target > 0) return `${this.color}${opacityHeaterActive}`
+
+        return `${this.color}${opacityHeaterInactive}`
+    }
+
+    get iconClass() {
+        const classes = ['_no-focus-style', 'cursor-pointer']
+
+        // add icon animation, when it is a fan and state > 0
+        if (this.isFan) {
+            const disableFanAnimation = this.$store.state.gui?.uiSettings.disableFanAnimation ?? false
+
+            if (!disableFanAnimation && (this.state ?? 0) > 0) classes.push('icon-rotate')
+        }
+
+        return classes
+    }
+
+    get isFan() {
+        return this.objectName.startsWith('temperature_fan')
+    }
+
+    get state(): number | null {
+        return this.printerObject.power ?? this.printerObject.speed ?? null
+    }
+
+    get formatState() {
+        if (this.state === null) return null
+        if (this.target === 0 && this.state === 0) return 'off'
+
+        return `${Math.round(this.state * 100)} %`
+    }
+
+    get avgPower() {
+        return this.$store.getters['printer/tempHistory/getAvgPower'](this.name) ?? 0
+    }
+
+    get avgSpeed() {
+        return this.$store.getters['printer/tempHistory/getAvgSpeed'](this.name) ?? 0
+    }
+
+    get avgState() {
+        if ('power' in this.printerObject) return Math.round(this.avgPower)
+        if ('speed' in this.printerObject) return Math.round(this.avgSpeed)
+
+        return null
+    }
+
+    get temperature(): number | null {
+        return this.printerObject?.temperature ?? null
+    }
+
+    get formatTemperature() {
+        return `${this.temperature?.toFixed(1) ?? '--'}°C`
+    }
+
+    get min_temp() {
+        return parseInt(this.printerObjectSettings.min_temp ?? 0)
+    }
+
+    get max_temp() {
+        return parseInt(this.printerObjectSettings.max_temp ?? 0)
+    }
+
+    get measured_min_temp() {
+        return this.printerObject?.measured_min_temp?.toFixed(1) ?? null
+    }
+
+    get measured_max_temp() {
+        return this.printerObject?.measured_max_temp?.toFixed(1) ?? null
+    }
+
+    get target() {
+        return this.printerObject?.target ?? null
+    }
+
+    get additionalSensorName() {
+        if (this.objectName === 'z_thermal_adjust') return 'z_thermal_adjust'
+
+        const additionalSensorName = additionalSensors.find((sensorName) => {
+            const objectName = `${sensorName} ${this.name}`
+
+            if (objectName in this.$store.state.printer) return true
+        })
+
+        if (!additionalSensorName) return null
+
+        return `${additionalSensorName} ${this.name}`
+    }
+
+    get rpm() {
+        if (!('rpm' in this.printerObject)) return null
+
+        return parseInt(this.printerObject.rpm)
+    }
+
+    get rpmClass() {
+        if (this.rpm === 0 && (this.printerObject.speed ?? 0) > 0) return 'red--text'
+
+        return ''
+    }
+
+    get presets() {
+        return this.$store.getters['gui/presets/getPresetsFromHeater']({ name: this.objectName }) ?? []
+    }
+
+    get command() {
+        if (this.objectName.startsWith('temperature_fan')) return 'SET_TEMPERATURE_FAN_TARGET'
+        if (this.objectName.startsWith('extruder') || this.objectName.startsWith('heater_'))
+            return 'SET_HEATER_TEMPERATURE'
+
+        return null
+    }
+
+    get commandAttributeName() {
+        if (this.command === 'SET_HEATER_TEMPERATURE') return 'HEATER'
+        if (this.command === 'SET_TEMPERATURE_FAN_TARGET') return 'TEMPERATURE_FAN'
+
+        return ''
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .v-icon._no-focus-style:focus::after {
+    opacity: 0 !important;
+}
+
+::v-deep .cursor-pointer {
+    cursor: pointer;
+}
+</style>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensor.vue b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensor.vue
new file mode 100644
index 000000000..40f1afd7e
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensor.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <temperature-panel-list-item-additional-sensor-value
+            v-for="keyName of additionalValues"
+            :key="keyName"
+            :printer-object="printerObject"
+            :object-name="objectName"
+            :key-name="keyName" />
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class TemperaturePanelListItemAdditionalSensor extends Mixins(BaseMixin) {
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: String, required: true }) readonly additionalObjectName!: string
+
+    get printerObject() {
+        if (!(this.additionalObjectName in this.$store.state.printer)) return {}
+
+        return this.$store.state.printer[this.additionalObjectName]
+    }
+
+    get additionalValues() {
+        if (this.objectName === 'z_thermal_adjust') return ['current_z_adjust']
+
+        return Object.keys(this.printerObject).filter((key) => key !== 'temperature')
+    }
+}
+</script>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensorValue.vue b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensorValue.vue
new file mode 100644
index 000000000..aadc033b1
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensorValue.vue
@@ -0,0 +1,70 @@
+<template>
+    <div v-if="isVisible">
+        <small>{{ formatValue }}</small>
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class TemperaturePanelListItemAdditionalSensorValue extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) readonly printerObject!: { [key: string]: number }
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: String, required: true }) readonly keyName!: string
+
+    get value() {
+        const value = this.printerObject[this.keyName] ?? null
+        if (isNaN(value)) return null
+
+        return value
+    }
+
+    get formatValue() {
+        let value = this.value?.toFixed(1)
+        if (this.value === null) value = '--'
+
+        // get unit
+        let unit: string | null = null
+        switch (this.keyName) {
+            case 'pressure':
+                unit = 'hPa'
+                break
+            case 'humidity':
+                unit = '%'
+                break
+            case 'current_z_adjust':
+                unit = 'mm'
+                break
+        }
+
+        // format value for current_z_adjust
+        if (this.keyName === 'current_z_adjust' && this.value) {
+            value = this.value.toFixed(3)
+
+            // convert z_adjust value if it is smaller than 0.1 to μm
+            if (Math.abs(this.value) < 0.1) {
+                value = Math.round(this.value * 1000).toString()
+                unit = 'μm'
+            }
+        }
+
+        return unit ? `${value} ${unit}` : value
+    }
+
+    get guiSetting() {
+        return this.$store.getters['gui/getDatasetAdditionalSensorValue']({
+            name: this.objectName,
+            sensor: this.keyName,
+        })
+    }
+
+    get isVisible() {
+        if (this.value === null) return false
+
+        return this.guiSetting
+    }
+}
+</script>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue b/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue
new file mode 100644
index 000000000..275c26c8e
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue
@@ -0,0 +1,90 @@
+<template>
+    <v-dialog v-model="boolShow" persistent :width="400">
+        <panel :title="formatName" :icon="icon" card-class="temperature-edit-heater-dialog" :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text class="pt-6">
+                <temperature-panel-list-item-edit-chart-serie
+                    v-for="dataset in chartSeries"
+                    :key="dataset"
+                    :object-name="objectName"
+                    :serie-name="dataset" />
+                <temperature-panel-list-item-edit-additional-sensor
+                    v-for="additionalSensor in additionalValues"
+                    :key="additionalSensor"
+                    :object-name="objectName"
+                    :additional-sensor="additionalSensor" />
+                <v-row>
+                    <v-col class="col-12 text-center pb-0">
+                        <v-color-picker
+                            hide-mode-switch
+                            mode="hexa"
+                            :value="color"
+                            class="mx-auto"
+                            @update:color="setChartColor" />
+                    </v-col>
+                </v-row>
+            </v-card-text>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCloseThick } from '@mdi/js'
+import TemperaturePanelListItemEditChartSerie from '@/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue'
+import TemperaturePanelListItemEditAdditionalSensor from '@/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue'
+import { Debounce } from 'vue-debounce-decorator'
+
+@Component({
+    components: { TemperaturePanelListItemEditAdditionalSensor, TemperaturePanelListItemEditChartSerie },
+})
+export default class TemperaturePanelListItemEdit extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+
+    @Prop({ type: Boolean, required: true }) readonly boolShow!: boolean
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: String, required: true }) readonly name!: string
+    @Prop({ required: true }) readonly additionalSensorName!: string | null
+    @Prop({ type: String, required: true }) readonly formatName!: string
+    @Prop({ type: String, required: true }) readonly icon!: string
+    @Prop({ type: String, required: true }) readonly color!: string
+
+    get chartSeries() {
+        return this.$store.getters['printer/tempHistory/getSerieNames'](this.objectName) ?? []
+    }
+
+    get printerObjectAdditionalSensor() {
+        if (this.additionalSensorName === null || !(this.additionalSensorName in this.$store.state.printer)) return {}
+
+        return this.$store.state.printer[this.additionalSensorName]
+    }
+
+    get additionalValues() {
+        if (this.objectName === 'z_thermal_adjust') return ['current_z_adjust']
+
+        return Object.keys(this.printerObjectAdditionalSensor).filter((key) => key !== 'temperature')
+    }
+
+    @Debounce(500)
+    setChartColor(value: string | any): void {
+        if (typeof value === 'object' && 'hex' in value) value = value.hex
+
+        this.$store.dispatch('gui/setChartColor', {
+            objectName: this.objectName,
+            value,
+        })
+
+        this.$store.dispatch('printer/tempHistory/setColor', { name: this.objectName, value })
+    }
+
+    closeDialog() {
+        this.$emit('close-dialog')
+    }
+}
+</script>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue b/src/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue
new file mode 100644
index 000000000..1c9d110bd
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue
@@ -0,0 +1,40 @@
+<template>
+    <v-row>
+        <v-col class="col-12 py-1">
+            <v-checkbox v-model="value" :label="label" hide-details class="mt-0" />
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class TemperaturePanelListItemEditAdditionalSensor extends Mixins(BaseMixin) {
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: String, required: true }) readonly additionalSensor!: string
+
+    get value() {
+        return this.$store.getters['gui/getDatasetAdditionalSensorValue']({
+            name: this.objectName,
+            type: this.additionalSensor,
+        })
+    }
+
+    set value(newVal) {
+        this.$store.dispatch('gui/setDatasetAdditionalSensorStatus', {
+            objectName: this.objectName,
+            dataset: this.additionalSensor,
+            value: newVal,
+        })
+    }
+
+    get label() {
+        return this.$t('Panels.TemperaturePanel.ShowNameInList', {
+            name: this.additionalSensor,
+        })
+    }
+}
+</script>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue b/src/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue
new file mode 100644
index 000000000..ddfbea12f
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue
@@ -0,0 +1,42 @@
+<template>
+    <v-row>
+        <v-col class="py-1">
+            <v-checkbox v-model="value" :label="label" hide-details class="mt-0" />
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { capitalize } from '@/plugins/helpers'
+
+@Component
+export default class TemperaturePanelListItemEditChartSerie extends Mixins(BaseMixin) {
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: String, required: true }) readonly serieName!: string
+
+    get value() {
+        return this.$store.getters['gui/getDatasetValue']({ name: this.objectName, type: this.serieName })
+    }
+
+    get label() {
+        return this.$t('Panels.TemperaturePanel.ShowNameInChart', {
+            name: this.formatSerieName,
+        })
+    }
+
+    set value(newVal) {
+        this.$store.dispatch('gui/setChartDatasetStatus', {
+            objectName: this.objectName,
+            dataset: this.serieName,
+            value: newVal,
+        })
+    }
+
+    get formatSerieName() {
+        return capitalize(this.serieName)
+    }
+}
+</script>
diff --git a/src/components/panels/Temperature/TemperaturePanelPresets.vue b/src/components/panels/Temperature/TemperaturePanelPresets.vue
new file mode 100644
index 000000000..f434e89cd
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelPresets.vue
@@ -0,0 +1,113 @@
+<template>
+    <div style="height: 100%">
+        <v-menu v-if="presets.length" :offset-y="true" left>
+            <template #activator="{ on, attrs }">
+                <v-btn
+                    text
+                    tile
+                    color="primary"
+                    v-bind="attrs"
+                    :disabled="['printing', 'paused'].includes(printer_state)"
+                    class="pa-1"
+                    v-on="on">
+                    <span class="d-none ml-1 d-md-block">{{ $t('Panels.TemperaturePanel.Presets') }}</span>
+                    <v-icon class="d-md-none">{{ mdiFire }}</v-icon>
+                    <v-icon>{{ mdiMenuDown }}</v-icon>
+                </v-btn>
+            </template>
+            <v-list dense class="py-0">
+                <v-list-item v-for="(preset, index) of presets" :key="index" link @click="preheat(preset)">
+                    <div class="d-flex align-center _preset-title">
+                        <v-icon small class="mr-1">{{ mdiFire }}</v-icon>
+                        <span style="padding-top: 2px">{{ preset.name }}</span>
+                    </div>
+                </v-list-item>
+            </v-list>
+            <v-divider class="_fix_transparency" />
+            <v-list dense class="py-0">
+                <v-list-item link @click="cooldown">
+                    <div class="d-flex align-center _preset-title">
+                        <v-icon small color="primary" class="mr-1">{{ mdiSnowflake }}</v-icon>
+                        <span class="primary--text">{{ $t('Panels.TemperaturePanel.Cooldown') }}</span>
+                    </div>
+                </v-list-item>
+            </v-list>
+        </v-menu>
+        <v-btn
+            v-else
+            :icon="$vuetify.breakpoint.smAndDown"
+            :text="$vuetify.breakpoint.mdAndUp"
+            tile
+            color="primary"
+            @click="cooldown">
+            <v-icon small>{{ mdiSnowflake }}</v-icon>
+            <span class="d-none ml-1 d-md-inline">{{ $t('Panels.TemperaturePanel.Cooldown') }}</span>
+        </v-btn>
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { GuiPresetsStatePreset } from '@/store/gui/presets/types'
+import { mdiFire, mdiMenuDown, mdiSnowflake } from '@mdi/js'
+
+@Component
+export default class TemperaturePanelPresets extends Mixins(BaseMixin) {
+    mdiFire = mdiFire
+    mdiMenuDown = mdiMenuDown
+    mdiSnowflake = mdiSnowflake
+
+    get presets(): GuiPresetsStatePreset[] {
+        return this.$store.getters['gui/presets/getPresets'] ?? []
+    }
+
+    get cooldownGcode(): string {
+        return this.$store.getters['gui/presets/getCooldownGcode']
+    }
+
+    preheat(preset: GuiPresetsStatePreset): void {
+        for (const [name, attributes] of Object.entries(preset.values)) {
+            if (attributes.bool) {
+                let gcode = `SET_HEATER_TEMPERATURE HEATER=${name} TARGET=${attributes.value}`
+
+                if (attributes.type === 'temperature_fan') {
+                    const fanName = name.replace('temperature_fan ', '')
+                    gcode = `SET_TEMPERATURE_FAN_TARGET temperature_fan=${fanName} TARGET=${attributes.value}`
+                }
+
+                this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+                this.$socket.emit('printer.gcode.script', { script: gcode })
+            }
+        }
+
+        if (preset.gcode !== '') {
+            setTimeout(() => {
+                this.$store.dispatch('server/addEvent', { message: preset.gcode, type: 'command' })
+                this.$socket.emit('printer.gcode.script', { script: preset.gcode })
+            }, 100)
+        }
+    }
+
+    cooldown(): void {
+        this.$store.dispatch('server/addEvent', { message: this.cooldownGcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: this.cooldownGcode })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+._preset-title {
+    font-size: 0.8125rem;
+    font-weight: 500;
+}
+
+/*
+workaround for fixing a transparency issue
+which is assumingly a vuetify bug
+*/
+._fix_transparency {
+    background-color: #1e1e1e;
+}
+</style>
diff --git a/src/components/panels/Temperature/TemperaturePanelSettings.vue b/src/components/panels/Temperature/TemperaturePanelSettings.vue
new file mode 100644
index 000000000..ad9cfc8a8
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelSettings.vue
@@ -0,0 +1,53 @@
+<template>
+    <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.TemperaturePanel.SetupTemperatures')">
+        <template #activator="{ on, attrs }">
+            <v-btn icon tile v-bind="attrs" v-on="on">
+                <v-icon small>{{ mdiCog }}</v-icon>
+            </v-btn>
+        </template>
+        <v-list>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="boolTempchart"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.TemperaturePanel.ShowChart')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="autoscaleTempchart"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.TemperaturePanel.AutoscaleChart')" />
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCog } from '@mdi/js'
+
+@Component
+export default class TemperaturePanelSettings extends Mixins(BaseMixin) {
+    mdiCog = mdiCog
+
+    get boolTempchart(): boolean {
+        return this.$store.state.gui.view.tempchart.boolTempchart ?? false
+    }
+
+    set boolTempchart(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.tempchart.boolTempchart', value: newVal })
+    }
+
+    get autoscaleTempchart(): boolean {
+        return this.$store.state.gui.view.tempchart.autoscale ?? false
+    }
+
+    set autoscaleTempchart(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.tempchart.autoscale', value: newVal })
+    }
+}
+</script>
diff --git a/src/components/panels/TemperaturePanel.vue b/src/components/panels/TemperaturePanel.vue
index 50d4702e0..4acf4e9e8 100644
--- a/src/components/panels/TemperaturePanel.vue
+++ b/src/components/panels/TemperaturePanel.vue
@@ -1,433 +1,49 @@
 <template>
-    <div>
-        <panel
-            v-if="klipperReadyForGui"
-            :icon="mdiThermometerLines"
-            :title="$t('Panels.TemperaturePanel.Headline').toString()"
-            :collapsible="true"
-            card-class="temperature-panel">
-            <!-- PRESET MENU -->
-            <template #buttons>
-                <v-menu v-if="presets.length" :offset-y="true" left title="Preheat">
-                    <template #activator="{ on, attrs }">
-                        <v-btn
-                            text
-                            tile
-                            color="primary"
-                            v-bind="attrs"
-                            :disabled="['printing', 'paused'].includes(printer_state)"
-                            class="pa-1"
-                            v-on="on">
-                            <span class="d-none ml-1 d-md-block">{{ $t('Panels.TemperaturePanel.Presets') }}</span>
-                            <v-icon class="d-md-none">{{ mdiFire }}</v-icon>
-                            <v-icon>{{ mdiMenuDown }}</v-icon>
-                        </v-btn>
-                    </template>
-                    <v-list dense class="py-0">
-                        <v-list-item v-for="preset of presets" :key="preset.index" link @click="preheat(preset)">
-                            <div class="d-flex align-center _preset-title">
-                                <v-icon small class="mr-1">{{ mdiFire }}</v-icon>
-                                <span style="padding-top: 2px">{{ preset.name }}</span>
-                            </div>
-                        </v-list-item>
-                    </v-list>
-                    <v-divider class="_fix_transparency"></v-divider>
-                    <v-list dense class="py-0">
-                        <v-list-item link @click="cooldown()">
-                            <div class="d-flex align-center _preset-title">
-                                <v-icon small color="primary" class="mr-1">{{ mdiSnowflake }}</v-icon>
-                                <span class="primary--text">{{ $t('Panels.TemperaturePanel.Cooldown') }}</span>
-                            </div>
-                        </v-list-item>
-                    </v-list>
-                </v-menu>
-                <v-btn
-                    v-if="presets.length === 0"
-                    :icon="$vuetify.breakpoint.smAndDown"
-                    :text="$vuetify.breakpoint.mdAndUp"
-                    tile
-                    color="primary"
-                    @click="cooldown()">
-                    <v-icon small>{{ mdiSnowflake }}</v-icon>
-                    <span class="d-none ml-1 d-md-inline">{{ $t('Panels.TemperaturePanel.Cooldown') }}</span>
-                </v-btn>
-                <v-menu
-                    :offset-y="true"
-                    :close-on-content-click="false"
-                    :title="$t('Panels.TemperaturePanel.SetupTemperatures')">
-                    <template #activator="{ on, attrs }">
-                        <v-btn icon tile v-bind="attrs" v-on="on">
-                            <v-icon small>{{ mdiCog }}</v-icon>
-                        </v-btn>
-                    </template>
-                    <v-list>
-                        <v-list-item class="minHeight36">
-                            <v-checkbox
-                                v-model="boolTempchart"
-                                class="mt-0"
-                                hide-details
-                                :label="$t('Panels.TemperaturePanel.ShowChart')"></v-checkbox>
-                        </v-list-item>
-                        <v-list-item class="minHeight36">
-                            <v-checkbox
-                                v-model="autoscaleTempchart"
-                                class="mt-0"
-                                hide-details
-                                :label="$t('Panels.TemperaturePanel.AutoscaleChart')"></v-checkbox>
-                        </v-list-item>
-                    </v-list>
-                </v-menu>
+    <panel
+        v-if="klipperReadyForGui"
+        :icon="mdiThermometerLines"
+        :title="$t('Panels.TemperaturePanel.Headline')"
+        :collapsible="true"
+        card-class="temperature-panel">
+        <template #buttons>
+            <temperature-panel-presets />
+            <temperature-panel-settings />
+        </template>
+        <v-card-text class="pa-0">
+            <temperature-panel-list />
+            <template v-if="boolTempchart">
+                <v-divider class="my-0" />
+                <temp-chart />
             </template>
-            <v-card-text class="pa-0">
-                <responsive
-                    :breakpoints="{
-                        mobile: (el) => el.width <= 395,
-                    }">
-                    <template #default="{ el }">
-                        <v-simple-table class="temperature-panel-table">
-                            <thead>
-                                <tr>
-                                    <th class="icon">&nbsp;</th>
-                                    <th class="name">{{ $t('Panels.TemperaturePanel.Name') }}</th>
-                                    <th v-if="!el.is.mobile" class="state">
-                                        {{ $t('Panels.TemperaturePanel.State') }}
-                                    </th>
-                                    <th class="current">
-                                        {{ $t('Panels.TemperaturePanel.Current') }}
-                                    </th>
-                                    <th class="target">
-                                        {{ $t('Panels.TemperaturePanel.Target') }}
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="(object, index) in temperatureObjects" :key="index">
-                                    <td class="icon">
-                                        <v-icon
-                                            :color="object.iconColor"
-                                            :class="`_no-focus-style ${object.iconClass}`"
-                                            style="cursor: pointer"
-                                            tabindex="-1"
-                                            @click="openHeater(object)">
-                                            {{ object.icon }}
-                                        </v-icon>
-                                    </td>
-                                    <td class="name">
-                                        <span style="cursor: pointer" @click="openHeater(object)">
-                                            {{ convertName(object.name) }}
-                                        </span>
-                                    </td>
-                                    <td v-if="!el.is.mobile" class="state">
-                                        <v-tooltip v-if="object.state !== null" top>
-                                            <template #activator="{ on, attrs }">
-                                                <div v-bind="attrs" v-on="on">
-                                                    {{ object.state }}
-                                                </div>
-                                            </template>
-                                            <span>{{ $t('Panels.TemperaturePanel.Avg') }}: {{ object.avgState }}</span>
-                                        </v-tooltip>
-                                    </td>
-                                    <td class="current">
-                                        <v-tooltip
-                                            top
-                                            :disabled="
-                                                !(
-                                                    object.measured_min_temp !== null ||
-                                                    object.measured_max_temp !== null
-                                                )
-                                            ">
-                                            <template #activator="{ on, attrs }">
-                                                <span style="cursor: default" v-bind="attrs" v-on="on">
-                                                    {{ object.temperature.toFixed(1) }}°C
-                                                </span>
-                                            </template>
-                                            <span>
-                                                {{ $t('Panels.TemperaturePanel.Max') }}:
-                                                {{ object.measured_max_temp }}°C
-                                                <br />
-                                                {{ $t('Panels.TemperaturePanel.Min') }}:
-                                                {{ object.measured_min_temp }}°C
-                                            </span>
-                                        </v-tooltip>
-                                        <div v-for="(values, key) of object.additionalSensors" :key="key">
-                                            <span v-if="values.bool" class="d-block">
-                                                <small>{{ values.value }} {{ values.unit }}</small>
-                                            </span>
-                                        </div>
-                                        <div v-if="object.rpm !== null">
-                                            <small :class="object.rpmClass">{{ object.rpm }} RPM</small>
-                                        </div>
-                                    </td>
-                                    <td class="target">
-                                        <temperature-input
-                                            v-if="object.command !== null"
-                                            :name="object.name"
-                                            :target="object.target"
-                                            :presets="object.presets"
-                                            :min_temp="object.min_temp"
-                                            :max_temp="object.max_temp"
-                                            :command="object.command"
-                                            :attribute-name="object.commandAttributeName"></temperature-input>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </v-simple-table>
-                    </template>
-                </responsive>
-            </v-card-text>
-            <v-card-text v-if="boolTempchart" class="pa-0 d-inline-block">
-                <v-divider class="mt-0 mb-2"></v-divider>
-                <v-row>
-                    <v-col class="py-0">
-                        <temp-chart></temp-chart>
-                    </v-col>
-                </v-row>
-            </v-card-text>
-        </panel>
-        <!-- COLOR-PICKER -->
-        <v-dialog v-model="editHeater.bool" persistent :width="400">
-            <panel
-                :title="convertName(editHeater.name)"
-                :icon="editHeater.icon"
-                card-class="temperature-edit-heater-dialog"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="editHeater.bool = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text class="pt-6">
-                    <v-row v-for="dataset in editHeater.chartSeries" :key="dataset">
-                        <v-col class="col-12 py-1">
-                            <v-checkbox
-                                v-model="editHeater['bool' + dataset.charAt(0).toUpperCase() + dataset.slice(1)]"
-                                :label="
-                                    $t('Panels.TemperaturePanel.ShowNameInChart', {
-                                        name: $t(`Panels.TemperaturePanel.Dataset.${capitalize(dataset)}`),
-                                    })
-                                "
-                                hide-details
-                                class="mt-0"
-                                @change="setVisible(dataset)"></v-checkbox>
-                        </v-col>
-                    </v-row>
-                    <v-row v-for="additionalSensor in editHeater.additionalSensors" :key="additionalSensor.name">
-                        <v-col class="col-12 py-1">
-                            <v-checkbox
-                                v-model="additionalSensor.bool"
-                                :label="$t('Panels.TemperaturePanel.ShowNameInList', { name: additionalSensor.name })"
-                                hide-details
-                                class="mt-0"
-                                @change="setVisibleAdditionalSensor(additionalSensor)"></v-checkbox>
-                        </v-col>
-                    </v-row>
-                    <v-row>
-                        <v-col class="col-12 text-center pb-0">
-                            <v-color-picker
-                                hide-mode-switch
-                                mode="hexa"
-                                :value="editHeater.color"
-                                class="mx-auto"
-                                @update:color="setChartColor"></v-color-picker>
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-            </panel>
-        </v-dialog>
-    </div>
+        </v-card-text>
+    </panel>
 </template>
 
 <script lang="ts">
 import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import { capitalize, convertName } from '@/plugins/helpers'
-import { Debounce } from 'vue-debounce-decorator'
-import { GuiPresetsStatePreset } from '@/store/gui/presets/types'
-import { PrinterStateAdditionalSensor, PrinterStateTemperatureObject } from '@/store/printer/types'
 import BaseMixin from '@/components/mixins/base'
 import ControlMixin from '@/components/mixins/control'
 import TempChart from '@/components/charts/TempChart.vue'
 import TemperatureInput from '@/components/inputs/TemperatureInput.vue'
 import Panel from '@/components/ui/Panel.vue'
 import Responsive from '@/components/ui/Responsive.vue'
-import { mdiCloseThick, mdiCog, mdiSnowflake, mdiFire, mdiMenuDown, mdiThermometerLines } from '@mdi/js'
+import { mdiCloseThick, mdiThermometerLines } from '@mdi/js'
+import TemperaturePanelPresets from '@/components/panels/Temperature/TemperaturePanelPresets.vue'
 
 @Component({
-    components: { Panel, TempChart, TemperatureInput, Responsive },
+    components: { Panel, TempChart, TemperatureInput, Responsive, TemperaturePanelPresets },
 })
 export default class TemperaturePanel extends Mixins(BaseMixin, ControlMixin) {
-    mdiSnowflake = mdiSnowflake
     mdiCloseThick = mdiCloseThick
-    mdiCog = mdiCog
-    mdiFire = mdiFire
-    mdiMenuDown = mdiMenuDown
     mdiThermometerLines = mdiThermometerLines
 
     convertName = convertName
     capitalize = capitalize
 
-    private editHeater: any = {
-        bool: false,
-        name: '',
-        icon: '',
-        boolTemperature: false,
-        boolTarget: false,
-        boolPower: false,
-        boolSpeed: false,
-        additionalSensors: {},
-        color: '',
-    }
-
-    get presets(): GuiPresetsStatePreset[] {
-        return this.$store.getters['gui/presets/getPresets'] ?? []
-    }
-
-    get cooldownGcode(): string {
-        return this.$store.getters['gui/presets/getCooldownGcode']
-    }
-
     get boolTempchart(): boolean {
         return this.$store.state.gui.view.tempchart.boolTempchart ?? false
     }
-
-    set boolTempchart(newVal: boolean) {
-        this.$store.dispatch('gui/saveSetting', { name: 'view.tempchart.boolTempchart', value: newVal })
-    }
-
-    get autoscaleTempchart(): boolean {
-        return this.$store.state.gui.view.tempchart.autoscale ?? false
-    }
-
-    set autoscaleTempchart(newVal: boolean) {
-        this.$store.dispatch('gui/saveSetting', { name: 'view.tempchart.autoscale', value: newVal })
-    }
-
-    get temperatureObjects() {
-        const sensors = this.$store.getters['printer/getTemperatureObjects'] ?? []
-
-        return sensors.filter((sensor: PrinterStateTemperatureObject) => !sensor.name.startsWith('_'))
-    }
-
-    preheat(preset: GuiPresetsStatePreset): void {
-        for (const [name, attributes] of Object.entries(preset.values)) {
-            if (attributes.bool) {
-                let gcode = `SET_HEATER_TEMPERATURE HEATER=${name} TARGET=${attributes.value}`
-
-                if (attributes.type === 'temperature_fan') {
-                    const fanName = name.replace('temperature_fan ', '')
-                    gcode = `SET_TEMPERATURE_FAN_TARGET temperature_fan=${fanName} TARGET=${attributes.value}`
-                }
-
-                this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-                this.$socket.emit('printer.gcode.script', { script: gcode })
-            }
-        }
-
-        if (preset.gcode !== '') {
-            setTimeout(() => {
-                this.$store.dispatch('server/addEvent', { message: preset.gcode, type: 'command' })
-                this.$socket.emit('printer.gcode.script', { script: preset.gcode })
-            }, 100)
-        }
-    }
-
-    cooldown(): void {
-        this.$store.dispatch('server/addEvent', { message: this.cooldownGcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: this.cooldownGcode })
-    }
-
-    openHeater(object: PrinterStateTemperatureObject): void {
-        this.editHeater.name = object.name
-        this.editHeater.icon = object.icon
-
-        this.editHeater.color = object.chartColor
-        this.editHeater.chartSeries = 'chartSeries' in object ? object.chartSeries : []
-        this.editHeater.boolTemperature = this.$store.getters['gui/getDatasetValue']({
-            name: object.name,
-            type: 'temperature',
-        })
-        this.editHeater.boolTarget = this.$store.getters['gui/getDatasetValue']({ name: object.name, type: 'target' })
-        this.editHeater.boolPower = this.$store.getters['gui/getDatasetValue']({ name: object.name, type: 'power' })
-        this.editHeater.boolSpeed = this.$store.getters['gui/getDatasetValue']({ name: object.name, type: 'speed' })
-        this.editHeater.additionalSensors = object.additionalSensors
-
-        this.editHeater.bool = true
-    }
-
-    setVisible(type: string): void {
-        const serieName = 'bool' + type.charAt(0).toUpperCase() + type.slice(1)
-        const value = this.editHeater[serieName]
-
-        const name = 'view.tempchart.datasetSettings.' + this.editHeater.name + '.' + type
-        this.$store.dispatch('gui/saveSetting', { name, value })
-    }
-
-    setVisibleAdditionalSensor(sensor: PrinterStateAdditionalSensor): void {
-        const name = 'view.tempchart.datasetSettings.' + this.editHeater.name + '.additionalSensors.' + sensor.name
-        this.$store.dispatch('gui/saveSetting', { name, value: sensor.bool })
-    }
-
-    @Debounce(500)
-    setChartColor(value: string | any): void {
-        if (typeof value === 'object' && 'hex' in value) value = value.hex
-        this.$store.commit('printer/tempHistory/setColor', { name: this.editHeater.name, value: value })
-
-        const name = 'view.tempchart.datasetSettings.' + this.editHeater.name + '.color'
-        this.$store.dispatch('gui/saveSetting', { name, value })
-    }
 }
 </script>
-
-<style scoped>
-.canvasjs-chart-tooltip > div {
-    border-radius: 10px !important;
-}
-
-._preset-title {
-    font-size: 0.8125rem;
-    font-weight: 500;
-}
-
-.v-icon._no-focus-style:focus::after {
-    opacity: 0 !important;
-}
-
-.temperature-panel-table th,
-.temperature-panel-table td {
-    padding-top: 5px !important;
-    padding-bottom: 5px !important;
-    height: auto !important;
-}
-
-.temperature-panel-table tr:hover {
-    background: none !important;
-}
-
-.temperature-panel-table .icon {
-    width: 24px;
-    padding-right: 0 !important;
-    text-align: center;
-}
-
-.temperature-panel-table .state {
-    width: 100px;
-    text-align: right !important;
-}
-
-.temperature-panel-table .current {
-    width: 100px;
-    text-align: right !important;
-}
-
-.temperature-panel-table .target {
-    width: 140px;
-}
-
-/*
-workaround for fixing a transparency issue
-which is assumingly a vuetify bug
-*/
-._fix_transparency {
-    background-color: #1e1e1e;
-}
-</style>
diff --git a/src/components/panels/WebcamPanel.vue b/src/components/panels/WebcamPanel.vue
index 53155523a..9ed38b488 100644
--- a/src/components/panels/WebcamPanel.vue
+++ b/src/components/panels/WebcamPanel.vue
@@ -28,7 +28,7 @@
                             <v-list-item-title>{{ $t('Panels.WebcamPanel.All') }}</v-list-item-title>
                         </v-list-item-content>
                     </v-list-item>
-                    <v-list-item v-for="webcam of webcams" :key="webcam.id" link @click="currentCamId = webcam.id">
+                    <v-list-item v-for="webcam of webcams" :key="webcam.name" link @click="currentCamId = webcam.name">
                         <v-list-item-icon class="mr-2">
                             <v-icon small class="mt-1">{{ convertWebcamIcon(webcam.icon) }}</v-icon>
                         </v-list-item-icon>
@@ -77,13 +77,14 @@ export default class WebcamPanel extends Mixins(BaseMixin, WebcamMixin) {
         return this.$store.getters['gui/webcams/getWebcams']
     }
 
+    // id changed to name with the refactoring of using moonraker webcam API
     get currentCamId(): string {
-        if (this.webcams.length === 1) return this.webcams[0].id ?? 'all'
+        if (this.webcams.length === 1) return this.webcams[0].name ?? 'all'
 
         let currentCamId = this.$store.state.gui.view.webcam.currentCam[this.currentPage ?? ''] ?? 'all'
-        if (this.webcams.findIndex((webcam: GuiWebcamStateWebcam) => webcam.id === currentCamId) !== -1)
+        if (this.webcams.findIndex((webcam: GuiWebcamStateWebcam) => webcam.name === currentCamId) !== -1)
             return currentCamId
-        else if (currentCamId !== undefined && this.webcams.length === 1) return this.webcams[0].id ?? ''
+        else if (currentCamId !== undefined && this.webcams.length === 1) return this.webcams[0].name ?? ''
         else return 'all'
     }
 
@@ -92,7 +93,7 @@ export default class WebcamPanel extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     get currentCam(): any {
-        const cam = this.webcams.find((cam: GuiWebcamStateWebcam) => cam.id === this.currentCamId)
+        const cam = this.webcams.find((cam: GuiWebcamStateWebcam) => cam.name === this.currentCamId)
 
         return (
             cam ?? {
diff --git a/src/components/settings/SettingsEditorTab.vue b/src/components/settings/SettingsEditorTab.vue
index 5b83a3911..f4b507eda 100644
--- a/src/components/settings/SettingsEditorTab.vue
+++ b/src/components/settings/SettingsEditorTab.vue
@@ -6,25 +6,23 @@
                     :title="$t('Settings.EditorTab.UseEscToClose')"
                     :sub-title="$t('Settings.EditorTab.UseEscToCloseDescription')"
                     :dynamic-slot-width="true">
-                    <v-switch v-model="escToClose" hide-details class="mt-0"></v-switch>
+                    <v-switch v-model="escToClose" hide-details class="mt-0" />
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
+                <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.EditorTab.ConfirmUnsavedChanges')"
                     :sub-title="$t('Settings.EditorTab.ConfirmUnsavedChangesDescription')"
                     :dynamic-slot-width="true">
-                    <v-switch v-model="confirmUnsavedChanges" hide-details class="mt-0"></v-switch>
+                    <v-switch v-model="confirmUnsavedChanges" hide-details class="mt-0" />
                 </settings-row>
-
-                <v-divider class="my-2"></v-divider>
+                <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.EditorTab.TabSize')"
                     :sub-title="$t('Settings.EditorTab.TabSizeDescription')"
                     :dynamic-slot-width="true">
-                    <v-select v-model="tabSize" :items="tabSizes" hide-details outlined dense attached></v-select>
+                    <v-select v-model="tabSize" :items="tabSizes" hide-details outlined dense attached />
                 </settings-row>
-
-                <v-divider class="my-2"></v-divider>
+                <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.EditorTab.KlipperRestartMethod')"
                     :sub-title="$t('Settings.EditorTab.KlipperRestartMethodDescription')">
@@ -34,23 +32,8 @@
                         hide-details
                         outlined
                         dense
-                        attached></v-select>
+                        attached />
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
-                <template v-if="availableMoonrakerInstances.length > 1">
-                    <settings-row
-                        :title="$t('Settings.EditorTab.MoonrakerRestartInstance')"
-                        :sub-title="$t('Settings.EditorTab.MoonrakerRestartInstanceDescription')">
-                        <v-select
-                            v-model="moonrakerRestartInstance"
-                            :items="availableMoonrakerInstances"
-                            hide-details
-                            outlined
-                            dense
-                            attached></v-select>
-                    </settings-row>
-                    <v-divider class="my-2"></v-divider>
-                </template>
             </v-card-text>
         </v-card>
     </div>
@@ -115,19 +98,5 @@ export default class SettingsEditorTab extends Mixins(BaseMixin) {
     set klipperRestartMethod(newVal) {
         this.$store.dispatch('gui/saveSetting', { name: 'editor.klipperRestartMethod', value: newVal })
     }
-
-    get moonrakerRestartInstance() {
-        return this.$store.state.gui.editor.moonrakerRestartInstance
-    }
-
-    set moonrakerRestartInstance(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'editor.moonrakerRestartInstance', value: newVal })
-    }
-
-    get availableMoonrakerInstances() {
-        const available_instances = this.$store.state.server.system_info?.available_services ?? []
-
-        return available_instances.filter((name: string) => name.startsWith('moonraker')).sort()
-    }
 }
 </script>
diff --git a/src/components/settings/SettingsGeneralTab.vue b/src/components/settings/SettingsGeneralTab.vue
index b46e21d3d..d1b7362f0 100644
--- a/src/components/settings/SettingsGeneralTab.vue
+++ b/src/components/settings/SettingsGeneralTab.vue
@@ -2,55 +2,43 @@
     <div>
         <v-card flat>
             <v-card-text>
-                <settings-row :title="$t('Settings.GeneralTab.PrinterName').toString()">
+                <settings-row :title="$t('Settings.GeneralTab.PrinterName')">
                     <v-text-field v-model="printerName" hide-details outlined dense></v-text-field>
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.GeneralTab.Language').toString()">
+                <v-divider class="my-2" />
+                <settings-row :title="$t('Settings.GeneralTab.Language')">
                     <v-select
                         v-model="currentLanguage"
                         :items="availableLanguages"
                         hide-details
                         outlined
                         dense
-                        attach></v-select>
+                        attach />
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.GeneralTab.DateFormat').toString()">
-                    <v-select
-                        v-model="dateFormat"
-                        :items="dateFormatItems"
-                        hide-details
-                        outlined
-                        dense
-                        attach></v-select>
+                <v-divider class="my-2" />
+                <settings-row :title="$t('Settings.GeneralTab.DateFormat')">
+                    <v-select v-model="dateFormat" :items="dateFormatItems" hide-details outlined dense attach />
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.GeneralTab.TimeFormat').toString()">
-                    <v-select
-                        v-model="timeFormat"
-                        :items="timeFormatItems"
-                        hide-details
-                        outlined
-                        dense
-                        attach></v-select>
+                <v-divider class="my-2" />
+                <settings-row :title="$t('Settings.GeneralTab.TimeFormat')">
+                    <v-select v-model="timeFormat" :items="timeFormatItems" hide-details outlined dense attach />
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
+                <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.GeneralTab.CalcPrintProgress').toString()"
-                    :sub-title="$t('Settings.GeneralTab.CalcPrintProgressDescription').toString()">
+                    :title="$t('Settings.GeneralTab.CalcPrintProgress')"
+                    :sub-title="$t('Settings.GeneralTab.CalcPrintProgressDescription')">
                     <v-select
                         v-model="calcPrintProgress"
                         :items="calcPrintProgressItems"
                         hide-details
                         dense
                         outlined
-                        attach></v-select>
+                        attach />
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
+                <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.GeneralTab.CalcEstimateTime').toString()"
-                    :sub-title="$t('Settings.GeneralTab.CalcEstimateTimeDescription').toString()">
+                    :title="$t('Settings.GeneralTab.CalcEstimateTime')"
+                    :sub-title="$t('Settings.GeneralTab.CalcEstimateTimeDescription')">
                     <v-select
                         v-model="calcEstimateTime"
                         :items="calcEstimateItems"
@@ -58,12 +46,12 @@
                         hide-details
                         dense
                         outlined
-                        attach></v-select>
+                        attach />
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
+                <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.GeneralTab.CalcEtaTime').toString()"
-                    :sub-title="$t('Settings.GeneralTab.CalcEtaTimeDescription').toString()">
+                    :title="$t('Settings.GeneralTab.CalcEtaTime')"
+                    :sub-title="$t('Settings.GeneralTab.CalcEtaTimeDescription')">
                     <v-select
                         v-model="calcEtaTime"
                         :items="calcEtaTimeItems"
@@ -71,10 +59,10 @@
                         hide-details
                         dense
                         outlined
-                        attach></v-select>
+                        attach />
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.GeneralTab.MoonrakerDb').toString()" :dynamic-slot-width="true">
+                <v-divider class="my-2" />
+                <settings-row :title="$t('Settings.GeneralTab.MainsailSettingsMoonrakerDb')" :dynamic-slot-width="true">
                     <input
                         ref="uploadBackupFile"
                         type="file"
@@ -88,8 +76,8 @@
                         {{ $t('Settings.GeneralTab.Restore') }}
                     </v-btn>
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.GeneralTab.FactoryReset').toString()" :dynamic-slot-width="true">
+                <v-divider class="my-2" />
+                <settings-row :title="$t('Settings.GeneralTab.FactoryReset')" :dynamic-slot-width="true">
                     <v-btn color="error" small @click="resetMainsail">
                         {{ $t('Settings.GeneralTab.FactoryReset') }}
                     </v-btn>
@@ -98,7 +86,7 @@
         </v-card>
         <v-dialog v-model="dialogBackupMainsail" persistent :width="360">
             <panel
-                :title="$t('Settings.GeneralTab.Backup').toString()"
+                :title="$t('Settings.GeneralTab.Backup')"
                 card-class="mainsail-backup-dialog"
                 :margin-bottom="false"
                 :icon="mdiHelpCircle">
@@ -121,20 +109,14 @@
                                     :label="db.label"
                                     hide-details
                                     class="mt-0"
-                                    @change="changeNamespace(db.name)"></v-checkbox>
+                                    @change="changeNamespace(db.name)" />
                             </template>
                             <v-checkbox
                                 v-if="availableNamespaces.includes('timelapse')"
                                 :label="$t('Settings.GeneralTab.DbTimelapseSettings')"
                                 hide-details
                                 class="mt-0"
-                                @change="changeNamespace('timelapse')"></v-checkbox>
-                            <v-checkbox
-                                v-if="availableNamespaces.includes('webcams')"
-                                :label="$t('Settings.GeneralTab.DbWebcams')"
-                                hide-details
-                                class="mt-0"
-                                @change="changeNamespace('webcams')"></v-checkbox>
+                                @change="changeNamespace('timelapse')" />
                         </v-col>
                     </v-row>
                     <v-row>
@@ -149,7 +131,7 @@
         </v-dialog>
         <v-dialog v-model="dialogResetMainsail" persistent :width="360">
             <panel
-                :title="$t('Settings.GeneralTab.FactoryReset').toString()"
+                :title="$t('Settings.GeneralTab.FactoryReset')"
                 card-class="factory-reset-dialog"
                 :margin-bottom="false"
                 :icon="mdiHelpCircle">
@@ -172,32 +154,26 @@
                                     :label="db.label"
                                     hide-details
                                     class="mt-0"
-                                    @change="changeNamespace(db.name)"></v-checkbox>
+                                    @change="changeNamespace(db.name)" />
                             </template>
                             <v-checkbox
                                 v-if="availableNamespaces.includes('timelapse')"
                                 :label="$t('Settings.GeneralTab.DbTimelapseSettings')"
                                 hide-details
                                 class="mt-0"
-                                @change="changeNamespace('timelapse')"></v-checkbox>
-                            <v-checkbox
-                                v-if="availableNamespaces.includes('webcams')"
-                                :label="$t('Settings.GeneralTab.DbWebcams')"
-                                hide-details
-                                class="mt-0"
-                                @change="changeNamespace('webcams')"></v-checkbox>
+                                @change="changeNamespace('timelapse')" />
                             <v-checkbox
                                 v-if="moonrakerComponents.includes('history')"
                                 :label="$t('Settings.GeneralTab.DbHistoryJobs')"
                                 hide-details
                                 class="mt-0"
-                                @change="changeNamespace('history_jobs')"></v-checkbox>
+                                @change="changeNamespace('history_jobs')" />
                             <v-checkbox
                                 v-if="moonrakerComponents.includes('history')"
                                 :label="$t('Settings.GeneralTab.DbHistoryTotals')"
                                 hide-details
                                 class="mt-0"
-                                @change="changeNamespace('history_totals')"></v-checkbox>
+                                @change="changeNamespace('history_totals')" />
                         </v-col>
                     </v-row>
                     <v-row>
@@ -215,7 +191,7 @@
         </v-dialog>
         <v-dialog v-model="dialogRestoreMainsail" persistent :width="360">
             <panel
-                :title="$t('Settings.GeneralTab.Restore').toString()"
+                :title="$t('Settings.GeneralTab.Restore')"
                 card-class="factory-reset-dialog"
                 :margin-bottom="false"
                 :icon="mdiHelpCircle">
@@ -238,7 +214,7 @@
                                     :label="db.label"
                                     hide-details
                                     class="mt-0"
-                                    @change="changeNamespace(db.name)"></v-checkbox>
+                                    @change="changeNamespace(db.name)" />
                             </template>
                         </v-col>
                     </v-row>
@@ -291,63 +267,59 @@ export default class SettingsGeneralTab extends Mixins(BaseMixin) {
         return [
             {
                 name: 'general',
-                label: this.$t('Settings.GeneralTab.General').toString(),
+                label: this.$t('Settings.GeneralTab.General'),
             },
             {
                 name: 'console',
-                label: this.$t('Settings.ConsoleTab.Console').toString(),
+                label: this.$t('Settings.ConsoleTab.Console'),
             },
             {
                 name: 'control',
-                label: this.$t('Settings.ControlTab.Control').toString(),
+                label: this.$t('Settings.ControlTab.Control'),
             },
             {
                 name: 'dashboard',
-                label: this.$t('Settings.DashboardTab.Dashboard').toString(),
+                label: this.$t('Settings.DashboardTab.Dashboard'),
             },
             {
                 name: 'editor',
-                label: this.$t('Settings.EditorTab.Editor').toString(),
+                label: this.$t('Settings.EditorTab.Editor'),
             },
             {
                 name: 'gcodeViewer',
-                label: this.$t('Settings.GCodeViewerTab.GCodeViewer').toString(),
+                label: this.$t('Settings.GCodeViewerTab.GCodeViewer'),
             },
             {
                 name: 'gcodehistory',
-                label: this.$t('Settings.GeneralTab.DbConsoleHistory').toString(),
+                label: this.$t('Settings.GeneralTab.DbConsoleHistory'),
             },
             {
                 name: 'macros',
-                label: this.$t('Settings.MacrosTab.Macros').toString(),
+                label: this.$t('Settings.MacrosTab.Macros'),
             },
             {
                 name: 'notifications',
-                label: this.$t('App.Notifications.Notifications').toString(),
+                label: this.$t('App.Notifications.Notifications'),
             },
             {
                 name: 'presets',
-                label: this.$t('Settings.PresetsTab.PreheatPresets').toString(),
+                label: this.$t('Settings.PresetsTab.PreheatPresets'),
             },
             {
                 name: 'remoteprinters',
-                label: this.$t('Settings.RemotePrintersTab.RemotePrinters').toString(),
+                label: this.$t('Settings.RemotePrintersTab.RemotePrinters'),
             },
             {
                 name: 'timelapse',
-                label: this.$t('Settings.TimelapseTab.Timelapse').toString(),
+                label: this.$t('Settings.TimelapseTab.Timelapse'),
             },
             {
                 name: 'uiSettings',
-                label: this.$t('Settings.UiSettingsTab.UiSettings').toString(),
+                label: this.$t('Settings.UiSettingsTab.UiSettings'),
             },
             {
                 name: 'view',
-                label: this.$t('Settings.GeneralTab.DbView').toString(),
-            },
-            {
-                name: 'webcams',
-                label: this.$t('Settings.WebcamsTab.Webcams').toString(),
+                label: this.$t('Settings.GeneralTab.DbView'),
             },
         ]
     }
@@ -429,13 +401,13 @@ export default class SettingsGeneralTab extends Mixins(BaseMixin) {
                 value: '24hours',
                 text: this.$t('Settings.GeneralTab.24hours', {
                     time: date.toLocaleTimeString(userLocale, { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }),
-                }).toString(),
+                }),
             },
             {
                 value: '12hours',
                 text: this.$t('Settings.GeneralTab.12hours', {
                     time: date.toLocaleTimeString(userLocale, { hour: '2-digit', minute: '2-digit', hourCycle: 'h12' }),
-                }).toString(),
+                }),
             },
         ]
     }
diff --git a/src/components/settings/SettingsRow.vue b/src/components/settings/SettingsRow.vue
index 179b21e7b..b9782dcbf 100644
--- a/src/components/settings/SettingsRow.vue
+++ b/src/components/settings/SettingsRow.vue
@@ -3,7 +3,7 @@
         <v-col :class="firstColClasses">
             <v-row class="d-flex flex-row">
                 <v-col v-if="loading" class="col-auto d-flex justify-center align-center pr-0">
-                    <v-progress-circular indeterminate color="primary" :size="24"></v-progress-circular>
+                    <v-progress-circular indeterminate color="primary" :size="24" />
                 </v-col>
                 <v-col v-else-if="icon" class="col-auto d-flex justify-center align-center pr-0">
                     <v-icon>{{ icon }}</v-icon>
@@ -15,7 +15,7 @@
             </v-row>
         </v-col>
         <v-col :class="secondColClasses">
-            <slot></slot>
+            <slot />
         </v-col>
     </v-row>
 </template>
@@ -23,6 +23,7 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
+import { TranslateResult } from 'vue-i18n'
 
 @Component
 export default class SettingsRow extends Mixins(BaseMixin) {
@@ -33,10 +34,10 @@ export default class SettingsRow extends Mixins(BaseMixin) {
     declare readonly icon: string
 
     @Prop({ required: true })
-    declare readonly title: string
+    declare readonly title: string | TranslateResult
 
     @Prop({ required: false })
-    declare readonly subTitle: string
+    declare readonly subTitle: string | TranslateResult
 
     @Prop({ required: false, default: false })
     declare readonly dynamicSlotWidth: boolean
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index 418775b66..91c24c80d 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -195,6 +195,13 @@
                         :step="1"
                         :label="tempchartHeight + 'px'" />
                 </settings-row>
+                <v-divider class="my-2" />
+                <settings-row
+                    :title="$t('Settings.UiSettingsTab.HideUpdateWarnings').toString()"
+                    :sub-title="$t('Settings.UiSettingsTab.HideUpdateWarningsDescription').toString()"
+                    :dynamic-slot-width="true">
+                    <v-switch v-model="hideUpdateWarnings" hide-details class="mt-0" />
+                </settings-row>
             </v-card-text>
         </v-card>
     </div>
@@ -401,6 +408,14 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.tempchartHeight', value: newVal })
     }
 
+    get hideUpdateWarnings() {
+        return this.$store.state.gui.uiSettings.hideUpdateWarnings ?? false
+    }
+
+    set hideUpdateWarnings(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.hideUpdateWarnings', value: newVal })
+    }
+
     clearColorObject(color: any): string {
         if (typeof color === 'object' && 'hex' in color) color = color.hex
         if (color.length > 7) color = color.substr(0, 7)
diff --git a/src/components/settings/SettingsWebcamsTab.vue b/src/components/settings/SettingsWebcamsTab.vue
index 9e01983f6..274805afe 100644
--- a/src/components/settings/SettingsWebcamsTab.vue
+++ b/src/components/settings/SettingsWebcamsTab.vue
@@ -1,28 +1,14 @@
 <template>
     <div>
-        <v-card v-if="!form.bool" flat>
+        <v-card v-if="!boolForm" flat>
             <v-card-text>
                 <h3 class="text-h5 mb-3">{{ $t('Settings.WebcamsTab.Webcams') }}</h3>
-                <div v-for="webcam in webcams" :key="webcam.id">
-                    <v-divider class="my-2" />
-                    <settings-row
-                        :title="webcam.name"
-                        :icon="convertWebcamIcon(webcam.icon)"
-                        :sub-title="getSubtitle(webcam)">
-                        <v-btn small outlined @click="editWebcam(webcam)">
-                            <v-icon small left>{{ mdiPencil }}</v-icon>
-                            {{ $t('Settings.Edit') }}
-                        </v-btn>
-                        <v-btn
-                            small
-                            outlined
-                            class="ml-3 minwidth-0 px-2"
-                            color="error"
-                            @click="deleteWebcam(webcam.id ?? '')">
-                            <v-icon small>{{ mdiDelete }}</v-icon>
-                        </v-btn>
-                    </settings-row>
-                </div>
+                <webcam-list-entry
+                    v-for="(webcam, index) in webcams"
+                    :key="webcam.name"
+                    :webcam="webcam"
+                    :bool-border-top="index > 0"
+                    @edit-webcam="editWebcam" />
             </v-card-text>
             <v-card-actions>
                 <v-btn v-if="existCrowsnestConf" text color="primary" @click="openCrowsnestConf">
@@ -33,161 +19,7 @@
             </v-card-actions>
         </v-card>
         <v-card v-else flat>
-            <v-form ref="webcamForm" v-model="form.valid" @submit.prevent="saveWebcam">
-                <v-card-title>
-                    {{
-                        form.id === null ? $t('Settings.WebcamsTab.CreateWebcam') : $t('Settings.WebcamsTab.EditWebcam')
-                    }}
-                </v-card-title>
-                <v-card-text>
-                    <v-row>
-                        <v-col class="col-12 col-sm-6">
-                            <v-row>
-                                <v-col class="d-flex">
-                                    <v-item-group>
-                                        <v-menu :offset-y="true" title="Icon">
-                                            <template #activator="{ on, attrs }">
-                                                <v-btn
-                                                    class="px-2 mr-2 _transition _menu-button"
-                                                    color="transparent"
-                                                    v-bind="attrs"
-                                                    elevation="0"
-                                                    :ripple="false"
-                                                    v-on="on"
-                                                    @blur="selectIcon = !selectIcon"
-                                                    @focus="selectIcon = !selectIcon">
-                                                    <v-icon>{{ convertWebcamIcon(form.icon) }}</v-icon>
-                                                    <v-icon
-                                                        :class="!selectIcon ? '' : '_rotate-180'"
-                                                        :color="!selectIcon ? '' : 'primary'"
-                                                        class="pl-1 mr-n2">
-                                                        {{ mdiMenuDown }}
-                                                    </v-icon>
-                                                </v-btn>
-                                            </template>
-                                            <v-list dense class="py-0">
-                                                <v-list-item
-                                                    v-for="icon of iconItems"
-                                                    :key="icon.value"
-                                                    link
-                                                    @click="setFormIcon(icon.value)">
-                                                    <v-list-item-icon class="mr-2">
-                                                        <v-icon small class="mt-1">
-                                                            {{ convertWebcamIcon(icon.value) }}
-                                                        </v-icon>
-                                                    </v-list-item-icon>
-                                                    <v-list-item-content>
-                                                        <v-list-item-title v-text="icon.text" />
-                                                    </v-list-item-content>
-                                                </v-list-item>
-                                            </v-list>
-                                        </v-menu>
-                                    </v-item-group>
-                                    <v-text-field
-                                        v-model="form.name"
-                                        :label="$t('Settings.WebcamsTab.Name')"
-                                        hide-details="auto"
-                                        outlined
-                                        :rules="[rules.required, rules.unique]"
-                                        class="_webcam-settings-name-field"
-                                        dense />
-                                </v-col>
-                            </v-row>
-                            <v-row>
-                                <v-col class="py-2">
-                                    <v-text-field
-                                        v-model="form.urlStream"
-                                        :label="$t('Settings.WebcamsTab.UrlStream')"
-                                        hide-details="auto"
-                                        outlined
-                                        dense
-                                        :rules="form.service !== 'mjpegstreamer-adaptive' ? [rules.required] : []" />
-                                </v-col>
-                            </v-row>
-                            <v-row>
-                                <v-col class="py-2">
-                                    <v-text-field
-                                        v-model="form.urlSnapshot"
-                                        :label="$t('Settings.WebcamsTab.UrlSnapshot')"
-                                        hide-details="auto"
-                                        outlined
-                                        dense
-                                        :rules="form.service === 'mjpegstreamer-adaptive' ? [rules.required] : []" />
-                                </v-col>
-                            </v-row>
-                            <v-row>
-                                <v-col class="py-2">
-                                    <v-select
-                                        v-model="form.service"
-                                        :items="serviceItems"
-                                        hide-details
-                                        outlined
-                                        dense
-                                        :label="$t('Settings.WebcamsTab.Service')"
-                                        attach />
-                                </v-col>
-                            </v-row>
-                            <v-row v-if="form.service === 'mjpegstreamer-adaptive' || form.service === 'jmuxer-stream'">
-                                <v-col class="py-2 col-6">
-                                    <v-text-field
-                                        v-model="form.targetFps"
-                                        outlined
-                                        dense
-                                        hide-details
-                                        :label="$t('Settings.WebcamsTab.TargetFPS')" />
-                                </v-col>
-                                <v-col class="py-2 col-6">
-                                    <v-select
-                                        v-model="form.rotate"
-                                        :items="rotateItems"
-                                        outlined
-                                        dense
-                                        hide-details
-                                        :label="$t('Settings.WebcamsTab.Rotate')" />
-                                </v-col>
-                            </v-row>
-                            <v-row>
-                                <v-col class="pt-1 pb-3">
-                                    <div class="v-label v-label--active theme--dark text-subtitle-1">
-                                        {{ $t('Settings.WebcamsTab.FlipWebcam') }}
-                                    </div>
-                                </v-col>
-                            </v-row>
-                            <v-row class="mt-0">
-                                <v-col class="py-0">
-                                    <v-checkbox
-                                        v-model="form.flipX"
-                                        class="mt-1"
-                                        hide-details
-                                        :label="$t('Settings.WebcamsTab.Horizontally')" />
-                                </v-col>
-                                <v-col class="py-0">
-                                    <v-checkbox
-                                        v-model="form.flipY"
-                                        class="mt-1"
-                                        hide-details
-                                        :label="$t('Settings.WebcamsTab.Vertically')" />
-                                </v-col>
-                            </v-row>
-                        </v-col>
-                        <v-col class="col-12 col-sm-6 text-center" align-self="center">
-                            <webcam-wrapper :webcam="form" />
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-                <v-card-actions class="d-flex justify-end">
-                    <v-btn text @click="form.bool = false">
-                        {{ $t('Settings.Cancel') }}
-                    </v-btn>
-                    <v-btn color="primary" text type="submit" :disabled="!form.name">
-                        {{
-                            form.id === null
-                                ? $t('Settings.WebcamsTab.SaveWebcam')
-                                : $t('Settings.WebcamsTab.UpdateWebcam')
-                        }}
-                    </v-btn>
-                </v-card-actions>
-            </v-form>
+            <webcam-form :webcam="formWebcam" :type="typeForm" @close="closeForm" />
         </v-card>
     </div>
 </template>
@@ -196,98 +28,30 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
-import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
-import { mdiMenuDown, mdiDelete, mdiPencil, mdiWebcam } from '@mdi/js'
+import { mdiDelete, mdiPencil } from '@mdi/js'
 import WebcamMixin from '@/components/mixins/webcam'
 import { FileStateFile } from '@/store/files/types'
-
-interface webcamForm {
-    bool: boolean
-    id: string | null
-    valid: boolean
-    name: string
-    icon: string
-    service: string
-    targetFps: number
-    urlStream: string
-    urlSnapshot: string
-    rotate: number
-    flipX: boolean
-    flipY: boolean
-}
+import WebcamForm from '@/components/settings/Webcams/WebcamForm.vue'
+import WebcamListEntry from '@/components/settings/Webcams/WebcamListEntry.vue'
+import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 
 @Component({
     components: {
         SettingsRow,
+        WebcamForm,
+        WebcamListEntry,
     },
 })
 export default class SettingsWebcamsTab extends Mixins(BaseMixin, WebcamMixin) {
     mdiPencil = mdiPencil
     mdiDelete = mdiDelete
-    mdiMenuDown = mdiMenuDown
-
-    private selectIcon: boolean = false
-
-    private form: webcamForm = {
-        bool: false,
-        id: null,
-        valid: false,
-        name: '',
-        icon: '',
-        service: '',
-        targetFps: 15,
-        urlStream: '',
-        urlSnapshot: '',
-        rotate: 0,
-        flipX: false,
-        flipY: false,
-    }
 
-    private rules = {
-        required: (value: string) => value !== '' || this.$t('Settings.WebcamsTab.Required'),
-        unique: (value: string) => !this.existsWebcamName(value) || this.$t('Settings.WebcamsTab.NameAlreadyExists'),
-    }
-
-    private rotateItems = [
-        { value: 0, text: '0°' },
-        { value: 90, text: '90°' },
-        { value: 180, text: '180°' },
-        { value: 270, text: '270°' },
-    ]
-
-    declare $refs: {
-        webcamForm: any
-    }
+    private boolForm = false
+    private typeForm: 'create' | 'edit' = 'create'
+    private formWebcam: GuiWebcamStateWebcam = {} as GuiWebcamStateWebcam
 
     get webcams() {
-        return this.$store.getters['gui/webcams/getWebcams'] ?? []
-    }
-
-    get iconItems() {
-        return [
-            { value: 'mdiPrinter3d', text: this.$t('Settings.WebcamsTab.IconPrinter') },
-            { value: 'mdiPrinter3dNozzle', text: this.$t('Settings.WebcamsTab.IconNozzle') },
-            { value: 'mdiRadiatorDisabled', text: this.$t('Settings.WebcamsTab.IconBed') },
-            { value: 'mdiWebcam', text: this.$t('Settings.WebcamsTab.IconCam') },
-            { value: 'mdiAlbum', text: this.$t('Settings.WebcamsTab.IconFilament') },
-            { value: 'mdiDoor', text: this.$t('Settings.WebcamsTab.IconDoor') },
-            { value: 'mdiRaspberryPi', text: this.$t('Settings.WebcamsTab.IconMcu') },
-            { value: 'mdiCampfire', text: this.$t('Settings.WebcamsTab.IconHot') },
-        ]
-    }
-
-    get serviceItems() {
-        return [
-            { value: 'mjpegstreamer', text: this.$t('Settings.WebcamsTab.Mjpegstreamer') },
-            { value: 'mjpegstreamer-adaptive', text: this.$t('Settings.WebcamsTab.MjpegstreamerAdaptive') },
-            { value: 'uv4l-mjpeg', text: this.$t('Settings.WebcamsTab.Uv4lMjpeg') },
-            { value: 'ipstream', text: this.$t('Settings.WebcamsTab.Ipstream') },
-            { value: 'webrtc-camerastreamer', text: this.$t('Settings.WebcamsTab.WebrtcCameraStreamer') },
-            { value: 'webrtc-mediamtx', text: this.$t('Settings.WebcamsTab.WebrtcMediaMTX') },
-            { value: 'hlsstream', text: this.$t('Settings.WebcamsTab.Hlsstream') },
-            { value: 'jmuxer-stream', text: this.$t('Settings.WebcamsTab.JMuxerStream') },
-            { value: 'webrtc-janus', text: this.$t('Settings.WebcamsTab.WebrtcJanus') },
-        ]
+        return this.$store.state.gui.webcams.webcams ?? []
     }
 
     get configfiles() {
@@ -302,87 +66,6 @@ export default class SettingsWebcamsTab extends Mixins(BaseMixin, WebcamMixin) {
         return this.configfiles.findIndex((file: FileStateFile) => file.filename === 'crowsnest.conf') !== -1
     }
 
-    getSubtitle(webcam: GuiWebcamStateWebcam) {
-        return 'URL: ' + (webcam.service === 'mjpegstreamer-adaptive' ? webcam.urlSnapshot : webcam.urlStream)
-    }
-
-    existsWebcamName(name: string) {
-        return (
-            this.webcams.findIndex(
-                (webcam: GuiWebcamStateWebcam) => webcam.name === name && webcam.id !== this.form.id
-            ) !== -1
-        )
-    }
-
-    createWebcam() {
-        this.clearDialog()
-
-        this.form.bool = true
-    }
-
-    editWebcam(webcam: GuiWebcamStateWebcam) {
-        this.form.id = webcam.id ?? null
-        this.form.name = webcam.name
-        this.form.icon = webcam.icon
-        this.form.service = webcam.service
-        this.form.targetFps = webcam.targetFps
-        this.form.urlStream = webcam.urlStream
-        this.form.urlSnapshot = webcam.urlSnapshot
-        this.form.rotate = webcam.rotate ?? 0
-        this.form.flipX = webcam.flipX
-        this.form.flipY = webcam.flipY
-
-        this.form.bool = true
-        this.form.valid = false
-
-        this.$nextTick(() => {
-            this.$refs.webcamForm?.validate()
-        })
-    }
-
-    saveWebcam() {
-        if (this.form.valid) {
-            const values = {
-                name: this.form.name,
-                icon: this.form.icon,
-                service: this.form.service,
-                targetFps: this.form.targetFps,
-                urlStream: this.form.urlStream,
-                urlSnapshot: this.form.urlSnapshot,
-                rotate: this.form.rotate,
-                flipX: this.form.flipX,
-                flipY: this.form.flipY,
-            }
-
-            if (this.form.id !== null) this.$store.dispatch('gui/webcams/update', { id: this.form.id, values: values })
-            else this.$store.dispatch('gui/webcams/store', { values })
-
-            this.clearDialog()
-        }
-    }
-
-    deleteWebcam(id: string) {
-        this.$store.dispatch('gui/webcams/delete', id)
-    }
-
-    clearDialog() {
-        this.form.bool = false
-        this.form.id = null
-        this.form.name = ''
-        this.form.icon = mdiWebcam
-        this.form.service = 'mjpegstreamer-adaptive'
-        this.form.targetFps = 15
-        this.form.urlStream = '/webcam/?action=stream'
-        this.form.urlSnapshot = '/webcam/?action=snapshot'
-        this.form.rotate = 0
-        this.form.flipX = false
-        this.form.flipY = false
-    }
-
-    setFormIcon(icon: string) {
-        this.form.icon = icon
-    }
-
     openCrowsnestConf() {
         this.$store.dispatch('editor/openFile', {
             root: 'config',
@@ -392,36 +75,35 @@ export default class SettingsWebcamsTab extends Mixins(BaseMixin, WebcamMixin) {
             permissions: this.crowsnestConf?.permissions,
         })
     }
-}
-</script>
 
-<style lang="scss" scoped>
-._transition i::before {
-    transition: transform 500ms;
-}
-._rotate-180:before {
-    transform: rotate(180deg);
-}
+    createWebcam() {
+        this.formWebcam = {
+            name: '',
+            enabled: true,
+            icon: 'mdiWebcam',
+            service: 'mjpegstreamer-adaptive',
+            target_fps: 15,
+            target_fps_idle: 15,
+            stream_url: '/webcam/?action=stream',
+            snapshot_url: '/webcam/?action=snapshot',
+            rotation: 0,
+            flip_horizontal: false,
+            flip_vertical: false,
+            extra_data: {},
+        }
 
-.v-item-group {
-    button:hover::before,
-    button:focus::before {
-        opacity: 0 !important;
-    }
-    ._menu-button {
-        height: 40px;
-        width: 62px;
-        border: 1px solid rgba(255, 255, 255, 0.25) !important;
+        this.typeForm = 'create'
+        this.boolForm = true
     }
-    ._menu-button:hover {
-        border-color: rgba(255, 255, 255, 1) !important;
-    }
-    ._menu-button:focus {
-        border: 2px solid var(--color-primary) !important;
+
+    closeForm() {
+        this.boolForm = false
     }
-}
 
-._webcam-settings-name-field ::v-deep .v-text-field__details {
-    margin-bottom: -12px !important;
+    editWebcam(webcam: GuiWebcamStateWebcam) {
+        this.formWebcam = { ...webcam }
+        this.typeForm = 'edit'
+        this.boolForm = true
+    }
 }
-</style>
+</script>
diff --git a/src/components/settings/Webcams/WebcamForm.vue b/src/components/settings/Webcams/WebcamForm.vue
new file mode 100644
index 000000000..55ae5a5e9
--- /dev/null
+++ b/src/components/settings/Webcams/WebcamForm.vue
@@ -0,0 +1,324 @@
+<template>
+    <v-form ref="webcamForm" v-model="valid" @submit.prevent="submit">
+        <v-card-title>{{ title }}</v-card-title>
+        <v-card-text>
+            <v-row>
+                <v-col class="col-12 col-sm-6">
+                    <v-row>
+                        <v-col class="d-flex">
+                            <v-item-group>
+                                <v-menu v-model="selectIcon" :offset-y="true" title="Icon">
+                                    <template #activator="{ on, attrs }">
+                                        <v-btn
+                                            class="px-2 mr-2 _transition _menu-button"
+                                            color="transparent"
+                                            v-bind="attrs"
+                                            elevation="0"
+                                            :ripple="false"
+                                            v-on="on">
+                                            <v-icon>{{ convertWebcamIcon(webcam.icon) }}</v-icon>
+                                            <v-icon :class="classIconButtonArrow" class="pl-1 mr-n2">
+                                                {{ mdiMenuDown }}
+                                            </v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <v-list dense class="py-0">
+                                        <v-list-item
+                                            v-for="icon of iconItems"
+                                            :key="icon.value"
+                                            link
+                                            @click="webcam.icon = icon.value">
+                                            <v-list-item-icon class="mr-2">
+                                                <v-icon small class="mt-1">
+                                                    {{ convertWebcamIcon(icon.value) }}
+                                                </v-icon>
+                                            </v-list-item-icon>
+                                            <v-list-item-content>
+                                                <v-list-item-title v-text="icon.text" />
+                                            </v-list-item-content>
+                                        </v-list-item>
+                                    </v-list>
+                                </v-menu>
+                            </v-item-group>
+                            <v-text-field
+                                v-model="webcam.name"
+                                :label="$t('Settings.WebcamsTab.Name')"
+                                hide-details="auto"
+                                outlined
+                                :rules="[rules.required, rules.unique]"
+                                class="_webcam-settings-name-field"
+                                dense />
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col class="py-2">
+                            <v-text-field
+                                v-model="webcam.stream_url"
+                                :label="$t('Settings.WebcamsTab.UrlStream')"
+                                hide-details="auto"
+                                outlined
+                                dense
+                                :rules="rulesStreamUrl" />
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col class="py-2">
+                            <v-text-field
+                                v-model="webcam.snapshot_url"
+                                :label="$t('Settings.WebcamsTab.UrlSnapshot')"
+                                hide-details="auto"
+                                outlined
+                                dense
+                                :rules="rulesSnapshotUrl" />
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col class="py-2">
+                            <v-select
+                                v-model="webcam.service"
+                                :items="serviceItems"
+                                hide-details
+                                outlined
+                                dense
+                                :label="$t('Settings.WebcamsTab.Service')" />
+                        </v-col>
+                    </v-row>
+                    <v-row v-if="['mjpegstreamer-adaptive', 'jmuxer-stream'].includes(webcam.service)">
+                        <v-col class="py-2 col-6">
+                            <v-text-field
+                                v-model="webcam.target_fps"
+                                outlined
+                                dense
+                                hide-details
+                                :label="$t('Settings.WebcamsTab.TargetFPS')" />
+                        </v-col>
+                        <v-col class="py-2 col-6">
+                            <v-select
+                                v-model="webcam.rotation"
+                                :items="rotationItems"
+                                outlined
+                                dense
+                                hide-details
+                                :label="$t('Settings.WebcamsTab.Rotate')" />
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col class="pt-1 pb-3">
+                            <div class="v-label v-label--active theme--dark text-subtitle-1">
+                                {{ $t('Settings.WebcamsTab.FlipWebcam') }}
+                            </div>
+                        </v-col>
+                    </v-row>
+                    <v-row class="mt-0">
+                        <v-col class="py-0">
+                            <v-checkbox
+                                v-model="webcam.flip_horizontal"
+                                class="mt-1"
+                                hide-details
+                                :label="$t('Settings.WebcamsTab.Horizontally')" />
+                        </v-col>
+                        <v-col class="py-0">
+                            <v-checkbox
+                                v-model="webcam.flip_vertical"
+                                class="mt-1"
+                                hide-details
+                                :label="$t('Settings.WebcamsTab.Vertically')" />
+                        </v-col>
+                    </v-row>
+                </v-col>
+                <v-col class="col-12 col-sm-6 text-center" align-self="center">
+                    <webcam-wrapper :webcam="webcam" />
+                </v-col>
+            </v-row>
+        </v-card-text>
+        <v-card-actions class="d-flex justify-end">
+            <v-btn text @click="closeForm">{{ $t('Settings.Cancel') }}</v-btn>
+            <v-btn color="primary" text type="submit" :disabled="!valid">{{ actionButtonText }}</v-btn>
+        </v-card-actions>
+    </v-form>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import SettingsRow from '@/components/settings/SettingsRow.vue'
+import { mdiDelete, mdiPencil, mdiMenuDown } from '@mdi/js'
+import WebcamMixin from '@/components/mixins/webcam'
+import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+
+@Component({
+    components: {
+        SettingsRow,
+    },
+})
+export default class WebcamForm extends Mixins(BaseMixin, WebcamMixin) {
+    mdiPencil = mdiPencil
+    mdiDelete = mdiDelete
+    mdiMenuDown = mdiMenuDown
+
+    @Prop({ type: Object, required: true }) private webcam!: GuiWebcamStateWebcam
+    @Prop({ type: String, default: 'create' }) readonly type!: 'create' | 'edit'
+
+    private selectIcon = false
+    private valid = false
+    private oldWebcamName = ''
+
+    private rules = {
+        required: (value: string) => value !== '' || this.$t('Settings.WebcamsTab.Required'),
+        unique: (value: string) => !this.existsWebcamName(value) || this.$t('Settings.WebcamsTab.NameAlreadyExists'),
+    }
+
+    get webcams() {
+        return this.$store.state.gui.webcams?.webcams ?? []
+    }
+
+    get title() {
+        if (this.type === 'create') return this.$t('Settings.WebcamsTab.CreateWebcam')
+
+        return this.$t('Settings.WebcamsTab.EditWebcam')
+    }
+
+    get actionButtonText() {
+        if (this.type === 'create') return this.$t('Settings.WebcamsTab.SaveWebcam')
+
+        return this.$t('Settings.WebcamsTab.UpdateWebcam')
+    }
+
+    get rotationItems() {
+        const options = [0, 90, 180, 270]
+        const output: { value: number; text: string }[] = []
+
+        options.forEach((value: number) => {
+            output.push({ value, text: `${value}°` })
+        })
+
+        return output
+    }
+
+    get rulesStreamUrl() {
+        let rules = []
+
+        if (this.webcam.service !== 'mjpegstreamer-adaptive') {
+            rules.push(this.rules.required)
+        }
+
+        return rules
+    }
+
+    get rulesSnapshotUrl() {
+        let rules = []
+
+        if (this.webcam.service === 'mjpegstreamer-adaptive') {
+            rules.push(this.rules.required)
+        }
+
+        return rules
+    }
+
+    get serviceItems() {
+        return [
+            { value: 'mjpegstreamer', text: this.$t('Settings.WebcamsTab.Mjpegstreamer') },
+            { value: 'mjpegstreamer-adaptive', text: this.$t('Settings.WebcamsTab.MjpegstreamerAdaptive') },
+            { value: 'uv4l-mjpeg', text: this.$t('Settings.WebcamsTab.Uv4lMjpeg') },
+            { value: 'ipstream', text: this.$t('Settings.WebcamsTab.Ipstream') },
+            { value: 'webrtc-camerastreamer', text: this.$t('Settings.WebcamsTab.WebrtcCameraStreamer') },
+            { value: 'webrtc-mediamtx', text: this.$t('Settings.WebcamsTab.WebrtcMediaMTX') },
+            { value: 'hlsstream', text: this.$t('Settings.WebcamsTab.Hlsstream') },
+            { value: 'jmuxer-stream', text: this.$t('Settings.WebcamsTab.JMuxerStream') },
+            { value: 'webrtc-janus', text: this.$t('Settings.WebcamsTab.WebrtcJanus') },
+        ]
+    }
+
+    get iconItems() {
+        return [
+            { value: 'mdiPrinter3d', text: this.$t('Settings.WebcamsTab.IconPrinter') },
+            { value: 'mdiPrinter3dNozzle', text: this.$t('Settings.WebcamsTab.IconNozzle') },
+            { value: 'mdiRadiatorDisabled', text: this.$t('Settings.WebcamsTab.IconBed') },
+            { value: 'mdiWebcam', text: this.$t('Settings.WebcamsTab.IconCam') },
+            { value: 'mdiAlbum', text: this.$t('Settings.WebcamsTab.IconFilament') },
+            { value: 'mdiDoor', text: this.$t('Settings.WebcamsTab.IconDoor') },
+            { value: 'mdiRaspberryPi', text: this.$t('Settings.WebcamsTab.IconMcu') },
+            { value: 'mdiCampfire', text: this.$t('Settings.WebcamsTab.IconHot') },
+        ]
+    }
+
+    get classIconButtonArrow() {
+        let classes = ['_transition']
+
+        if (this.selectIcon) classes.push('_rotate-180')
+
+        return classes
+    }
+
+    mounted() {
+        this.oldWebcamName = this.webcam.name
+    }
+
+    existsWebcamName(name: string) {
+        name = name.toLowerCase().trim()
+
+        const count =
+            this.webcams.find((webcam: GuiWebcamStateWebcam) => webcam.name.toLowerCase().trim() === name)?.length ?? 0
+
+        // If we are creating a new webcam, we only want to check if the name already exists
+        if (this.type === 'create') return count !== 0
+
+        // If we are editing a webcam, we want to check if the name only exists once (the one we are editing)
+        return count >= 1
+    }
+
+    submit() {
+        if (this.type === 'create') {
+            this.save()
+            return
+        }
+
+        this.update()
+    }
+
+    async save() {
+        await this.$store.dispatch('gui/webcams/store', this.webcam)
+        this.$emit('close')
+    }
+
+    async update() {
+        await this.$store.dispatch('gui/webcams/update', { webcam: this.webcam, oldWebcamName: this.oldWebcamName })
+        this.$emit('close')
+    }
+
+    closeForm() {
+        this.$emit('close')
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep ._transition svg {
+    transition: transform 500ms;
+}
+::v-deep ._rotate-180 svg {
+    transform: rotate(180deg);
+}
+
+.v-item-group {
+    button:hover::before,
+    button:focus::before {
+        opacity: 0 !important;
+    }
+    ._menu-button {
+        height: 40px;
+        width: 62px;
+        border: 1px solid rgba(255, 255, 255, 0.25) !important;
+    }
+    ._menu-button:hover {
+        border-color: rgba(255, 255, 255, 1) !important;
+    }
+    ._menu-button:focus {
+        border: 2px solid var(--color-primary) !important;
+    }
+}
+
+._webcam-settings-name-field ::v-deep .v-text-field__details {
+    margin-bottom: -12px !important;
+}
+</style>
diff --git a/src/components/settings/Webcams/WebcamListEntry.vue b/src/components/settings/Webcams/WebcamListEntry.vue
new file mode 100644
index 000000000..9afbb906c
--- /dev/null
+++ b/src/components/settings/Webcams/WebcamListEntry.vue
@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <v-divider v-if="boolBorderTop" class="my-2" />
+        <settings-row :title="webcam.name" :icon="icon" :sub-title="subtitle">
+            <template v-if="webcam.source === 'database'">
+                <v-btn
+                    class="minwidth-0 px-2"
+                    small
+                    outlined
+                    :color="webcam.enabled ? '' : 'secondary'"
+                    @click="toogleStatus">
+                    <v-icon small>{{ mdiLightbulbOutline }}</v-icon>
+                </v-btn>
+                <v-btn class="ml-3" small outlined @click="edit">
+                    <v-icon small left>{{ mdiPencil }}</v-icon>
+                    {{ $t('Settings.Edit') }}
+                </v-btn>
+                <v-btn small outlined class="ml-3 minwidth-0 px-2" color="error" @click="deleteWebcam">
+                    <v-icon small>{{ mdiDelete }}</v-icon>
+                </v-btn>
+            </template>
+        </settings-row>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import SettingsRow from '@/components/settings/SettingsRow.vue'
+import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import { mdiDelete, mdiPencil, mdiLightbulbOutline } from '@mdi/js'
+import WebcamMixin from '@/components/mixins/webcam'
+
+@Component({
+    components: {
+        SettingsRow,
+    },
+})
+export default class WebcamListEntry extends Mixins(BaseMixin, WebcamMixin) {
+    mdiPencil = mdiPencil
+    mdiDelete = mdiDelete
+    mdiLightbulbOutline = mdiLightbulbOutline
+
+    @Prop({ type: Object, default: () => {} }) private webcam!: GuiWebcamStateWebcam
+    @Prop({ type: Boolean, default: false }) private boolBorderTop!: boolean
+
+    get icon() {
+        return this.convertWebcamIcon(this.webcam.icon)
+    }
+
+    get subtitle() {
+        if (this.webcam.service === 'mjpegstreamer-adaptive') return `URL: ${this.webcam.snapshot_url}`
+
+        return `URL: ${this.webcam.stream_url}`
+    }
+
+    toogleStatus() {
+        let webcam = { ...this.webcam }
+        webcam.enabled = !webcam.enabled
+        this.$store.dispatch('gui/webcams/update', { webcam: webcam, oldWebcamName: webcam.name })
+    }
+
+    edit() {
+        this.$emit('edit-webcam', this.webcam)
+    }
+
+    deleteWebcam() {
+        this.$store.dispatch('gui/webcams/delete', this.webcam.name)
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/ui/Panel.vue b/src/components/ui/Panel.vue
index 15f6284f9..e54c3b40f 100644
--- a/src/components/ui/Panel.vue
+++ b/src/components/ui/Panel.vue
@@ -96,6 +96,15 @@ export default class Panel extends Mixins(BaseMixin) {
 .icon-rotate-90 {
     transform: rotate(90deg);
 }
+
+.panel-toolbar {
+    overflow-y: hidden;
+}
+
+::v-deep .panel-toolbar .v-btn {
+    height: 100% !important;
+    max-height: none;
+}
 </style>
 
 <style lang="scss">
@@ -105,13 +114,6 @@ export default class Panel extends Mixins(BaseMixin) {
 .v-card.panel .v-toolbar__content .subheading {
     user-select: none;
 }
-.panel-toolbar {
-    overflow-y: hidden;
-}
-.panel-toolbar .v-btn {
-    height: 100% !important;
-    max-height: none;
-}
 .panel-toolbar .v-btn.v-btn--icon {
     width: var(--panel-toolbar-icon-btn-width) !important;
 }
diff --git a/src/components/webcams/Hlsstreamer.vue b/src/components/webcams/Hlsstreamer.vue
index a8c0edf16..1a45c8193 100644
--- a/src/components/webcams/Hlsstreamer.vue
+++ b/src/components/webcams/Hlsstreamer.vue
@@ -14,27 +14,24 @@
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Hls from 'hls.js'
+import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class Hlsstreamer extends Mixins(BaseMixin) {
+export default class Hlsstreamer extends Mixins(BaseMixin, WebcamMixin) {
     private aspectRatio: null | number = null
     private isVisible = true
     private hls: Hls | null = null
 
-    @Prop({ required: true })
-    camSettings: any
-
-    @Prop()
-    printerUrl: string | undefined
+    @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
+    @Prop({ default: null }) readonly printerUrl!: string | null
 
     declare $refs: {
         video: HTMLVideoElement
     }
 
     get url() {
-        if (!this.isVisible) return ''
-
-        return this.camSettings.urlStream || ''
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {
@@ -46,8 +43,8 @@ export default class Hlsstreamer extends Mixins(BaseMixin) {
         }
 
         let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
         if (transforms.trimStart().length) return { transform: transforms.trimStart() }
 
         if (this.aspectRatio) {
diff --git a/src/components/webcams/Ipstreamer.vue b/src/components/webcams/Ipstreamer.vue
index c34dba8e1..b4514acdd 100644
--- a/src/components/webcams/Ipstreamer.vue
+++ b/src/components/webcams/Ipstreamer.vue
@@ -1,9 +1,3 @@
-<style scoped>
-.webcamImage {
-    width: 100%;
-}
-</style>
-
 <template>
     <video v-observe-visibility="visibilityChanged" :src="url" autoplay :style="webcamStyle" class="webcamImage" />
 </template>
@@ -11,28 +5,25 @@
 <script lang="ts">
 import { Component, Mixins, Prop } 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 Ipstreamer extends Mixins(BaseMixin) {
+export default class Ipstreamer extends Mixins(BaseMixin, WebcamMixin) {
     private isVisible = true
 
-    @Prop({ required: true })
-    camSettings: any
-
-    @Prop()
-    printerUrl: string | undefined
+    @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
+    @Prop({ default: null }) readonly printerUrl!: string | null
 
     get url() {
-        if (!this.isVisible) return ''
-
-        return this.camSettings.urlStream || ''
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {
         let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)'
-        if (transforms.trimLeft().length) return { transform: transforms.trimLeft() }
+        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
+        if (transforms.trimStart().length) return { transform: transforms.trimStart() }
 
         return ''
     }
@@ -42,3 +33,9 @@ export default class Ipstreamer extends Mixins(BaseMixin) {
     }
 }
 </script>
+
+<style scoped>
+.webcamImage {
+    width: 100%;
+}
+</style>
diff --git a/src/components/webcams/JMuxerStream.vue b/src/components/webcams/JMuxerStream.vue
index 9323ae0bf..58f38f9b7 100644
--- a/src/components/webcams/JMuxerStream.vue
+++ b/src/components/webcams/JMuxerStream.vue
@@ -14,30 +14,29 @@
 import JMuxer from 'jmuxer'
 import { Component, Mixins, Prop, 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 JMuxerStreamer extends Mixins(BaseMixin) {
+export default class JMuxerStreamer extends Mixins(BaseMixin, WebcamMixin) {
     private jmuxer: JMuxer | null = null
     private status: string = 'connecting'
 
-    @Prop({ required: true })
-    camSettings: any
-
-    @Prop()
-    printerUrl: string | undefined
+    @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
+    @Prop({ default: null }) readonly printerUrl!: string | null
 
     declare $refs: {
         video: HTMLVideoElement
     }
 
     get url() {
-        return this.camSettings.urlStream || ''
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {
         let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
         if (transforms.trimStart().length) return { transform: transforms.trimStart() }
 
         return ''
@@ -59,7 +58,7 @@ export default class JMuxerStreamer extends Mixins(BaseMixin) {
         }
 
         const video = this.$refs.video
-        const targetFps = this.camSettings.targetFps || 10
+        const targetFps = this.camSettings.target_fps || 10
 
         this.jmuxer = new JMuxer({
             node: video,
diff --git a/src/components/webcams/JanusStreamer.vue b/src/components/webcams/JanusStreamer.vue
index e7ac9a693..74e39ad04 100644
--- a/src/components/webcams/JanusStreamer.vue
+++ b/src/components/webcams/JanusStreamer.vue
@@ -23,6 +23,7 @@ import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import { JanusJs, JanusSession, JanusStreamingPlugin } from 'typed_janus_js'
 import BaseMixin from '@/components/mixins/base'
 import { ConstructorOptions } from 'typed_janus_js/src/interfaces/janus'
+import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 
 @Component
 export default class JanusStreamer extends Mixins(BaseMixin) {
@@ -33,15 +34,12 @@ export default class JanusStreamer extends Mixins(BaseMixin) {
     private aspectRatio: null | number = null
     private status: string = 'connecting'
 
-    @Prop({ required: true })
-    camSettings: any
-
+    @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
     @Prop({ default: null }) declare readonly printerUrl: string | null
-
     @Ref() declare stream: HTMLVideoElement
 
     get url() {
-        const baseUrl = this.camSettings.urlStream
+        const baseUrl = this.camSettings.stream_url
         let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
         url.port = '8188'
         url.protocol = this.printerUrl?.startsWith('https') ? 'wss' : 'ws'
@@ -56,7 +54,7 @@ export default class JanusStreamer extends Mixins(BaseMixin) {
     }
 
     get streamId() {
-        const pathnameParts = new URL(this.camSettings.urlStream).pathname.split('/')
+        const pathnameParts = new URL(this.camSettings.stream_url).pathname.split('/')
         return pathnameParts[pathnameParts.length - 1]
     }
 
@@ -67,8 +65,8 @@ export default class JanusStreamer extends Mixins(BaseMixin) {
         }
 
         let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
         if (transforms.trimStart().length) output.transform = transforms.trimStart()
 
         if (this.aspectRatio) output.aspectRatio = this.aspectRatio
@@ -132,7 +130,7 @@ export default class JanusStreamer extends Mixins(BaseMixin) {
     @Watch('url')
     async changedUrl() {
         await this.session?.destroy({})
-        this.startStream()
+        await this.startStream()
     }
 }
 </script>
diff --git a/src/components/webcams/Mjpegstreamer.vue b/src/components/webcams/Mjpegstreamer.vue
index cb389f1bb..1e64a04d4 100644
--- a/src/components/webcams/Mjpegstreamer.vue
+++ b/src/components/webcams/Mjpegstreamer.vue
@@ -14,12 +14,14 @@
 import Component from 'vue-class-component'
 import { Mixins, Prop, 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'
 
 @Component
-export default class Mjpegstreamer extends Mixins(BaseMixin) {
+export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
     private currentFPS = 0
     private streamState = false
     private aspectRatio: null | number = null
@@ -32,11 +34,8 @@ export default class Mjpegstreamer extends Mixins(BaseMixin) {
     private isVisibleViewport = false
     private isVisibleDocument = true
 
-    @Prop({ required: true })
-    camSettings: any
-
-    @Prop()
-    printerUrl: string | undefined
+    @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
+    @Prop({ default: null }) readonly printerUrl!: string | null
 
     @Prop({ default: true }) declare showFps: boolean
 
@@ -46,11 +45,7 @@ export default class Mjpegstreamer extends Mixins(BaseMixin) {
     }
 
     get url() {
-        const baseUrl = this.camSettings.urlStream
-        let url = new URL(baseUrl, this.printerUrl === undefined ? this.hostUrl.toString() : this.printerUrl)
-        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
-
-        return decodeURIComponent(url.toString())
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {
@@ -62,8 +57,8 @@ export default class Mjpegstreamer extends Mixins(BaseMixin) {
         }
 
         let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
         if (transforms.trimStart().length) output.transform = transforms.trimStart()
 
         if (this.aspectRatio) {
diff --git a/src/components/webcams/MjpegstreamerAdaptive.vue b/src/components/webcams/MjpegstreamerAdaptive.vue
index 2eb71ebd2..40d2c77f8 100644
--- a/src/components/webcams/MjpegstreamerAdaptive.vue
+++ b/src/components/webcams/MjpegstreamerAdaptive.vue
@@ -20,6 +20,7 @@
 import Component from 'vue-class-component'
 import { Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 
 @Component
 export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
@@ -44,8 +45,8 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
         mjpegstreamerAdaptive: any
     }
 
-    @Prop({ required: true }) declare camSettings: any
-    @Prop() declare printerUrl: string | undefined
+    @Prop({ required: true }) declare camSettings: GuiWebcamStateWebcam
+    @Prop({ default: null }) readonly printerUrl!: string | null
     @Prop({ default: true }) declare showFps: boolean
 
     get webcamStyle() {
@@ -57,9 +58,9 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
         }
 
         let transforms = ''
-        if (this.camSettings.flipX ?? false) transforms += ' scaleX(-1)'
-        if (this.camSettings.flipY ?? false) transforms += ' scaleY(-1)'
-        if ((this.camSettings.rotate ?? 0) === 180) transforms += ' rotate(180deg)'
+        if (this.camSettings.flip_horizontal ?? false) transforms += ' scaleX(-1)'
+        if (this.camSettings.flip_vertical ?? false) transforms += ' scaleY(-1)'
+        if ((this.camSettings.rotation ?? 0) === 180) transforms += ' rotate(180deg)'
         if (transforms.trimStart().length) output.transform = transforms.trimStart()
 
         if (this.aspectRatio) {
@@ -75,7 +76,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
     }
 
     get rotate() {
-        return [90, 270].includes(this.camSettings.rotate ?? 0)
+        return [90, 270].includes(this.camSettings.rotation ?? 0)
     }
 
     refreshFrame() {
@@ -86,9 +87,9 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
     }
 
     async setFrame() {
-        const baseUrl = this.camSettings.urlSnapshot
+        const baseUrl = this.camSettings.snapshot_url
 
-        let url = new URL(baseUrl, this.printerUrl === undefined ? this.hostUrl.toString() : this.printerUrl)
+        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
         if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
 
         url.searchParams.append('bypassCache', this.refresh.toString())
@@ -115,7 +116,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
                 const x = canvas.width / 2
                 const y = canvas.height / 2
                 ctx.translate(x, y)
-                ctx.rotate((this.camSettings.rotate * Math.PI) / 180)
+                ctx.rotate((this.camSettings.rotation * Math.PI) / 180)
                 await ctx?.drawImage(
                     frame,
                     (-frame.width / 2) * scale,
@@ -123,7 +124,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
                     frame.width * scale,
                     frame.height * scale
                 )
-                ctx.rotate(-((this.camSettings.rotate * Math.PI) / 180))
+                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)
 
@@ -138,7 +139,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
     onLoad() {
         this.isLoaded = true
 
-        const targetFps = this.camSettings.targetFps || 10
+        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)
diff --git a/src/components/webcams/Uv4lMjpeg.vue b/src/components/webcams/Uv4lMjpeg.vue
index b342cfa8b..c1795e41f 100644
--- a/src/components/webcams/Uv4lMjpeg.vue
+++ b/src/components/webcams/Uv4lMjpeg.vue
@@ -13,27 +13,24 @@
 import { Component, Mixins, Prop, 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 Uv4lMjpeg extends Mixins(BaseMixin) {
+export default class Uv4lMjpeg extends Mixins(BaseMixin, WebcamMixin) {
     private aspectRatio: null | number = null
     private isVisible = false
     private isVisibleViewport = false
     private isVisibleDocument = true
 
     @Prop({ required: true }) declare readonly camSettings: GuiWebcamStateWebcam
-    @Prop() declare printerUrl: string | undefined
+    @Prop({ default: null }) readonly printerUrl!: string | null
 
     declare $refs: {
         webcamUv4lMjpegImage: HTMLImageElement
     }
 
     get url() {
-        const baseUrl = this.camSettings.urlStream
-        let url = new URL(baseUrl, this.printerUrl === undefined ? this.hostUrl.toString() : this.printerUrl)
-        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
-
-        return decodeURIComponent(url.toString())
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {
@@ -45,8 +42,8 @@ export default class Uv4lMjpeg extends Mixins(BaseMixin) {
         }
 
         let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
         if (transforms.trimStart().length) output.transform = transforms.trimStart()
 
         if (this.aspectRatio) {
diff --git a/src/components/webcams/WebcamWrapper.vue b/src/components/webcams/WebcamWrapper.vue
index 9ad383716..cd2dfb679 100644
--- a/src/components/webcams/WebcamWrapper.vue
+++ b/src/components/webcams/WebcamWrapper.vue
@@ -3,14 +3,14 @@
         <template v-if="webcam.service === 'grid'">
             <v-container v-if="webcams" fluid class="pb-4">
                 <v-row dense>
-                    <v-col v-for="gridWebcam in webcams" :key="gridWebcam.id" cols="6">
-                        <webcam-wrapper-item :webcam="gridWebcam" :show-fps="showFps" />
+                    <v-col v-for="gridWebcam in webcams" :key="gridWebcam.name" cols="6">
+                        <webcam-wrapper-item :webcam="gridWebcam" :printer-url="printerUrl" :show-fps="showFps" />
                     </v-col>
                 </v-row>
             </v-container>
         </template>
         <template v-else>
-            <webcam-wrapper-item :webcam="webcam" :show-fps="showFps" />
+            <webcam-wrapper-item :webcam="webcam" :printer-url="printerUrl" :show-fps="showFps" />
         </template>
     </div>
 </template>
@@ -30,6 +30,7 @@ import WebcamWrapperItem from '@/components/webcams/WebcamWrapperItem.vue'
 export default class WebcamWrapper extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) webcam!: GuiWebcamStateWebcam
     @Prop({ type: Boolean, default: true }) showFps!: Boolean
+    @Prop({ type: String, default: null }) printerUrl!: string | null
 
     get webcams(): GuiWebcamStateWebcam[] {
         return this.$store.getters['gui/webcams/getWebcams']
diff --git a/src/components/webcams/WebcamWrapperItem.vue b/src/components/webcams/WebcamWrapperItem.vue
index ec944e4e4..baee260c6 100644
--- a/src/components/webcams/WebcamWrapperItem.vue
+++ b/src/components/webcams/WebcamWrapperItem.vue
@@ -1,31 +1,31 @@
 <template>
     <div>
         <template v-if="service === 'mjpegstreamer'">
-            <mjpegstreamer :cam-settings="webcam" :show-fps="showFps" />
+            <mjpegstreamer :cam-settings="webcam" :show-fps="showFps" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'mjpegstreamer-adaptive'">
-            <mjpegstreamer-adaptive :cam-settings="webcam" :show-fps="showFps" />
+            <mjpegstreamer-adaptive :cam-settings="webcam" :show-fps="showFps" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'uv4l-mjpeg'">
-            <uv4l-mjpeg :cam-settings="webcam" />
+            <uv4l-mjpeg :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'ipstream'">
-            <ipstreamer :cam-settings="webcam" />
+            <ipstreamer :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'hlsstream'">
-            <hlsstreamer :cam-settings="webcam" />
+            <hlsstreamer :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'jmuxer-stream'">
-            <j-muxer-stream :cam-settings="webcam" />
+            <j-muxer-stream :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'webrtc-camerastreamer'">
-            <webrtc-camera-streamer :cam-settings="webcam" />
+            <webrtc-camera-streamer :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'webrtc-janus'">
-            <janus-streamer :cam-settings="webcam" />
+            <janus-streamer :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'webrtc-mediamtx'">
-            <webrtc-media-m-t-x :cam-settings="webcam" />
+            <webrtc-media-m-t-x :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else>
             <p class="text-center py-3 font-italic">{{ $t('Panels.WebcamPanel.UnknownWebcamService') }}</p>
@@ -55,6 +55,7 @@ import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 export default class WebcamWrapperItem extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) webcam!: GuiWebcamStateWebcam
     @Prop({ type: Boolean, default: true }) showFps!: Boolean
+    @Prop({ default: null }) printerUrl!: string | null
 
     get service() {
         return this.webcam?.service ?? 'unknown'
diff --git a/src/components/webcams/WebrtcCameraStreamer.vue b/src/components/webcams/WebrtcCameraStreamer.vue
index 7c4ed1af9..7c4795c07 100644
--- a/src/components/webcams/WebrtcCameraStreamer.vue
+++ b/src/components/webcams/WebrtcCameraStreamer.vue
@@ -20,6 +20,7 @@
 <script lang="ts">
 import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 
 @Component
 export default class WebrtcCameraStreamer extends Mixins(BaseMixin) {
@@ -29,15 +30,12 @@ export default class WebrtcCameraStreamer extends Mixins(BaseMixin) {
     private aspectRatio: null | number = null
     private status: string = 'connecting'
 
-    @Prop({ required: true })
-    camSettings: any
-
+    @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
     @Prop({ default: null }) declare readonly printerUrl: string | null
-
     @Ref() declare stream: HTMLVideoElement
 
     get url() {
-        const baseUrl = this.camSettings.urlStream
+        const baseUrl = this.camSettings.stream_url
         let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
         url.port = this.hostPort.toString()
 
@@ -53,8 +51,8 @@ export default class WebrtcCameraStreamer extends Mixins(BaseMixin) {
         }
 
         let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
         if (transforms.trimStart().length) output.transform = transforms.trimStart()
 
         if (this.aspectRatio) output.aspectRatio = this.aspectRatio
diff --git a/src/components/webcams/WebrtcMediaMTX.vue b/src/components/webcams/WebrtcMediaMTX.vue
index e09994655..65abd7892 100644
--- a/src/components/webcams/WebrtcMediaMTX.vue
+++ b/src/components/webcams/WebrtcMediaMTX.vue
@@ -20,13 +20,14 @@
 <script lang="ts">
 import { Component, 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 WebrtcRTSPSimpleServer extends Mixins(BaseMixin) {
-    @Prop({ required: true }) camSettings: any
-
-    @Ref()
-    declare video: HTMLVideoElement
+export default class WebrtcRTSPSimpleServer extends Mixins(BaseMixin, WebcamMixin) {
+    @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
+    @Prop({ default: null }) readonly printerUrl!: string | null
+    @Ref() declare video: HTMLVideoElement
 
     // webrtc player vars
     private terminated: boolean = false
@@ -47,19 +48,20 @@ export default class WebrtcRTSPSimpleServer extends Mixins(BaseMixin) {
 
     get webcamStyle() {
         let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
         if (transforms.trimStart().length) return { transform: transforms.trimStart() }
 
         return ''
     }
 
     get url() {
-        if (this.camSettings.urlStream.startsWith('http')) {
-            return this.camSettings.urlStream.replace('http', 'ws') + 'ws'
+        let baseUrl = this.camSettings.stream_url
+        if (baseUrl.startsWith('http')) {
+            baseUrl = baseUrl.replace('http', 'ws') + 'ws'
         }
 
-        return this.camSettings.urlStream
+        return this.convertUrl(baseUrl, this.printerUrl)
     }
 
     // stop and restart the video if the url changes
diff --git a/src/locales/cz.json b/src/locales/cz.json
index 0b4c8e992..9b4165176 100644
--- a/src/locales/cz.json
+++ b/src/locales/cz.json
@@ -794,8 +794,6 @@
             "Editor": "Editor",
             "KlipperRestartMethod": "Metoda restartu Klipperu",
             "KlipperRestartMethodDescription": "Vyberte metodu restartu, která se použije při editaci konfiguračních souborů Klipperu v \"Uložit a restartovat\".",
-            "MoonrakerRestartInstance": "Restart instance Moonrakeru",
-            "MoonrakerRestartInstanceDescription": "Vyberte, která služba Moonrakeru se restartuje v \"Uložit a restartovat\", když se editují konfigurační soubory Moonrakeru.",
             "UseEscToClose": "Použít ESC pro zavření editoru",
             "UseEscToCloseDescription": "Umožňuje použití klávesy ESC k zavření editoru"
         },
diff --git a/src/locales/da.json b/src/locales/da.json
index fcc163a76..1dad1e719 100644
--- a/src/locales/da.json
+++ b/src/locales/da.json
@@ -793,8 +793,6 @@
             "Editor": "Editor",
             "KlipperRestartMethod": "Metode for genstart af Klipper",
             "KlipperRestartMethodDescription": "Vælg hvilken metode der skal bruges ved brug af 'Gem & Genstart' når der redigeres i Klipper config filer.",
-            "MoonrakerRestartInstance": "Genstart Moonraker instans",
-            "MoonrakerRestartInstanceDescription": "Vælg hvilken instans af Moonraker servicen der skal genstartes ved brug af 'Gem & Genstart' når der redigeres i Moonraker config filer.",
             "UseEscToClose": "Tryk ESC for at lukke Editor.",
             "UseEscToCloseDescription": "Tillader at ESC lukker Editor"
         },
diff --git a/src/locales/de.json b/src/locales/de.json
index c1bd8396f..eb3a1aec2 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -478,27 +478,51 @@
             }
         },
         "UpdatePanel": {
-            "CheckForUpdates": "auf aktualisierungen prüfen",
+            "Abort": "abbrechen",
+            "AreYouSure": "Bist du dir sicher?",
+            "CheckForUpdates": "auf Aktualisierungen prüfen",
+            "Close": "schließen",
+            "CommitHistory": "Commit Verlauf",
             "Commits": "Commits",
             "CommitsAvailable": "keine Einreichung verfügbar | {count} Einreichung verfügbar | {count} Einreichungen verfügbar",
-            "CommitsOnDate": "Engereicht am {date}",
+            "CommitsOnDate": "Eingereicht am {date}",
             "CommittedDaysAgo": "eingereicht vor {days} Tagen",
             "CommittedHoursAgo": "eingereicht vor {hours} Stunden",
             "CommittedOnDate": "eingereicht am {date}",
             "CommittedYesterday": "eingereicht gestern",
+            "ConfigChanges": "Konfigurationsänderungen",
+            "CountPackagesCanBeUpgraded": "{count} Pakete können aktualisiert werden",
             "Detached": "abgetrennt",
             "Dirty": "kompromittiert",
-            "ERROR": "FEHLER",
+            "GenericUpdateQuestion": "Überprüfe den Commit-Verlauf (falls verfügbar) und die GitHub-Projektseite von diesem Projekt, um festzustellen, ob manuelle Anpassungen nach dieser Aktualisierung erforderlich sind.",
+            "GitHubPage": "GitHub Projektseite",
+            "HardRecovery": "Harte Wiederherstellung",
+            "InitUpdateManager": "Der Update Manager ist noch nicht initialisiert. Dies ist normal, wenn das System zum ersten Mal gestartet wird. Bitte klicke auf die Aktualisierungsschaltfläche, um alle Komponenten zu initialisieren.",
             "Invalid": "ungültig",
+            "IUnderstandTheRisks": "Ich habe die Risiken verstanden",
+            "LinkToGithub": "Link zu GitHub",
+            "KlipperUpdateQuestionFirmware": "Dadurch wird die Klipper-Host-Software aktualisiert. Steuerplatinen, auf denen die Klipper-Firmware läuft, müssen möglicherweise mit einer neu kompilierten Firmware geflasht werden, bevor die Maschine wieder in Betrieb genommen werden kann.",
+            "KlipperUpdateQuestionConfig": "Dieses Update kann Änderungen an den Konfigurationsparametern enthalten, die in der Datei printer.cfg geändert werden müssen; Informationen hierzu findest du im Änderungsprotokoll.",
+            "MoonrakerUpdateQuestion": "Dadurch wird die Moonraker-API aktualisiert. Möglicherweise sind Änderungen an der Datei moonraker.conf erforderlich, damit die Maschine wieder verwendet werden kann.",
+            "MoreCommitsInfo": "Hier können maximal 30 Commits angezeigt werden. Um alle Commits zu sehen, klicke bitte auf den folgenden Link:",
+            "Notification": {
+                "Detached": "Ein abgetrennter Zustand ist weder ein Fehler noch ein Problem. Es bedeutet nur, dass im lokalen Repository zusätzliche Commits existieren, die im entfernten Repository nicht vorhanden sind.",
+                "Dirty": "Das lokale Repository wurde geändert und kann in diesem Zustand nicht aktualisiert werden. Bitte stelle wieder ein saubers Repository her."
+            },
             "OSPackages": "OS-Pakete",
-            "PackagesCanBeUpgraded": "Paketupdates sind verfügbar",
+            "SoftRecovery": "einfache Wiederherstellung",
+            "StartUpdate": "Aktualisierung starten",
             "System": "System",
+            "ThesePackagesCanBeUpgrade": "Diese Systempakete können aktualisiert werden:",
             "Unknown": "unbekannt",
             "Update": "update",
             "UpdateAll": "Alle Komponenten updaten",
             "UpdateManager": "Update Manager",
+            "UpdateWarning": "Aktualisierungswarnung: {name}",
             "Upgrade": "upgrade",
-            "UpToDate": "aktuell"
+            "UpgradeableSystemPackages": "Aktualisierbare Systempakete",
+            "UpToDate": "aktuell",
+            "WebClientUpdateQuestion": "In einigen Fällen kann die Aktualisierung des Webclients Änderungen mit sich bringen, die zu Inkompatibilitäten führen können. Weitere Informationen sind in den Veröffentlichungshinweisen zu finden."
         }
     },
     "ManualProbe": {
@@ -809,8 +833,6 @@
             "Editor": "Editor",
             "KlipperRestartMethod": "Klipper Neustartmethode",
             "KlipperRestartMethodDescription": "Wähle aus, welche Neustartmethode verwendet werden soll wenn 'Speichern & Neustarten' geklickt wir im Editor.",
-            "MoonrakerRestartInstance": "Moonraker Neustartinstanz",
-            "MoonrakerRestartInstanceDescription": "Wähle aus, welche Moonrakerinstanz neu gestartet werden soll wenn 'Speichern & Neustarten' im Editor geklickt wird.",
             "UseEscToClose": "ESC drücken um Editor zu schließen",
             "UseEscToCloseDescription": "Erlaubt es den Editor mit ESC zu schließen.",
             "TabSize": "TAB Größe",
@@ -851,7 +873,6 @@
             "DbHistoryTotals": "Historie Gesamtzähler",
             "DbTimelapseSettings": "Zeitraffer Einstellungen",
             "DbView": "Ansichtseinstellungen",
-            "DbWebcams": "Webcams",
             "EstimateValues": {
                 "Filament": "Filament",
                 "File": "Datei",
@@ -861,7 +882,7 @@
             "FactoryReset": "Werkseinstellungen",
             "General": "Allgemein",
             "Language": "Sprache",
-            "MoonrakerDb": "Moonraker Datenbank",
+            "MainsailSettingsMoonrakerDb": "Mainsail Einstellungen in Moonraker DB",
             "PrinterName": "Druckername",
             "Reset": "zurücksetzen",
             "Restore": "Wiederherstellung",
@@ -1046,6 +1067,8 @@
             "Guide": "Leitfaden",
             "HideSaveConfigButtonForBedMesh": "SAVE_CONFIG Schaltfläche ausblenden bei bed_mesh Änderungen",
             "HideSaveConfigButtonForBedMeshDescription": "SAVE_CONFIG nicht anzeigen, wenn nur das Speichern eines bed_mesh in Klipper aussteht.",
+            "HideUpdateWarnings": "Aktualisierungswarnungen ausblenden",
+            "HideUpdateWarningsDescription": "Mit dieser Option werden alle Aktualisierungswarnungen im Aktualisierungsmanager ausgeblendet.",
             "LockSliders": "Sperre Schieberegler auf Touchscreen Geräten",
             "LockSlidersDelay": "Verzögerung der Sperre für Schieberegler",
             "LockSlidersDelayDescription": "Schieberegler werden nach einer bestimmten Verzögerung gesperrt. Wenn 0 oder leer, dann sperren Schieberegler nur nach wechseln/neuladen der Seite.",
diff --git a/src/locales/en.json b/src/locales/en.json
index f5ec4852b..86d442965 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -478,7 +478,11 @@
             }
         },
         "UpdatePanel": {
+            "Abort": "Abort",
+            "AreYouSure": "Are you sure?",
             "CheckForUpdates": "Check for updates",
+            "Close": "Close",
+            "CommitHistory": "Commit History",
             "Commits": "Commits",
             "CommitsAvailable": "no commits available | {count} commit available | {count} commits available",
             "CommitsOnDate": "Commits on {date}",
@@ -486,19 +490,39 @@
             "CommittedHoursAgo": "committed {hours} hours ago",
             "CommittedOnDate": "committed on {date}",
             "CommittedYesterday": "committed yesterday",
+            "ConfigChanges": "Config Changes",
+            "CountPackagesCanBeUpgraded": "{count} packages can be upgraded",
             "Detached": "detached",
             "Dirty": "dirty",
-            "ERROR": "ERROR",
+            "GenericUpdateQuestion": "Check the commit history (if available) and the GitHub page for this project to see if any manual adjustments are necessary for this update.",
+            "GitHubPage": "GitHub Page",
+            "HardRecovery": "Hard Recovery",
+            "InitUpdateManager": "The Update Manager has not been initialized yet. This is normal when you start the system for the first time. Please click on the refresh button to initialize all components.",
             "Invalid": "invalid",
+            "IUnderstandTheRisks": "I understand the risks",
+            "LinkToGithub": "Link to GitHub",
+            "KlipperUpdateQuestionFirmware": "This will update the Klipper host software. Control boards running the Klipper firmware may need to be flashed with recompiled firmware before the machine can be put back into service.",
+            "KlipperUpdateQuestionConfig": "This update may also contain changes to config parameters that would need to be modified in the printer.cfg file, see the change log for details.",
+            "MoonrakerUpdateQuestion": "This will update the Moonraker API. Changes to the moonraker.conf file may be required to continue using the machine.",
+            "MoreCommitsInfo": "A maximum of 30 commits can be displayed here. To see all commits, please click on the following link:",
+            "Notification": {
+                "Detached": "Detached state is not an error nor is it a problem. It only means that additional commits exist in the local repository that do not exist in the remote repository.",
+                "Dirty": "The local repository has been modified and cannot be updated in this state. Please recover this repository."
+            },
             "OSPackages": "OS-Packages",
-            "PackagesCanBeUpgraded": "packages can be upgraded",
+            "SoftRecovery": "Soft Recovery",
+            "StartUpdate": "Start Update",
             "System": "System",
+            "ThesePackagesCanBeUpgrade": "These system packages can be upgraded:",
             "Unknown": "unknown",
             "Update": "update",
             "UpdateAll": "Update all components",
             "UpdateManager": "Update Manager",
+            "UpdateWarning": "Update warning: {name}",
             "Upgrade": "upgrade",
-            "UpToDate": "up-to-date"
+            "UpgradeableSystemPackages": "Upgradeable System Packages",
+            "UpToDate": "up-to-date",
+            "WebClientUpdateQuestion": "In some cases updating the web client could have changes that may cause incompatibility. See the release notes for more information."
         }
     },
     "ManualProbe": {
@@ -809,8 +833,6 @@
             "Editor": "Editor",
             "KlipperRestartMethod": "Klipper restart method",
             "KlipperRestartMethodDescription": "Select which restart method will be used on 'Save & Restart' when editing Klipper config files.",
-            "MoonrakerRestartInstance": "Moonraker restart instance",
-            "MoonrakerRestartInstanceDescription": "Select which Moonraker service will restart on 'Save & Restart' when editing Moonraker config files.",
             "UseEscToClose": "Use ESC to close editor",
             "UseEscToCloseDescription": "Allows the ESC key to close the editor",
             "TabSize": "TAB Size",
@@ -851,7 +873,6 @@
             "DbHistoryTotals": "History Totals",
             "DbTimelapseSettings": "Timelapse Settings",
             "DbView": "View Settings",
-            "DbWebcams": "Webcams",
             "EstimateValues": {
                 "Filament": "Filament",
                 "File": "File",
@@ -861,7 +882,7 @@
             "FactoryReset": "Factory reset",
             "General": "General",
             "Language": "Language",
-            "MoonrakerDb": "Moonraker DB",
+            "MainsailSettingsMoonrakerDb": "Mainsail Settings in Moonraker DB",
             "PrinterName": "Printer Name",
             "Reset": "reset",
             "Restore": "Restore",
@@ -1046,6 +1067,8 @@
             "Guide": "Guide",
             "HideSaveConfigButtonForBedMesh": "Hide SAVE_CONFIG button for bed_mesh changes",
             "HideSaveConfigButtonForBedMeshDescription": "Hide SAVE_CONFIG, if only bed_mesh changes are pending to be saved in Klipper.",
+            "HideUpdateWarnings": "Hide Update Warnings",
+            "HideUpdateWarningsDescription": "This option will hide all update warnings in the update manager.",
             "LockSliders": "Lock sliders on touchscreen devices",
             "LockSlidersDelay": "Slider lock delay",
             "LockSlidersDelayDescription": "Sliders will lock after a given delay. If set to 0 or left blank, sliders will only lock on page change/reload.",
diff --git a/src/locales/es.json b/src/locales/es.json
index 20867b237..c91fedeea 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -723,8 +723,6 @@
             "Editor": "Editor",
             "KlipperRestartMethod": "Metodo de reinicio de klipper",
             "KlipperRestartMethodDescription": "Elija metodo de reinicio que sera usado cuando editamos configuracion de klipper y presionamos \"Guardar y Reiniciar\"",
-            "MoonrakerRestartInstance": "Instancia de Moonraker a reinicar",
-            "MoonrakerRestartInstanceDescription": "Elija que instacia de moonrker se reiniciara cuando editando configuracionde monnraker presionemos \"Guardar y reiniciar\" ",
             "UseEscToClose": "Use ESC para cerrar",
             "UseEscToCloseDescription": "Permite que la tecla ESC cierre el editor"
         },
diff --git a/src/locales/fr.json b/src/locales/fr.json
index d34b8a059..f50745167 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -777,8 +777,6 @@
             "Editor": "Editeur",
             "KlipperRestartMethod": "Méthode de redémarrage de Klipper",
             "KlipperRestartMethodDescription": "Choisissez la méthode utilisée pour redémarrer Klipper lors d'un appui sur 'Save & Restart' après édition des fichiers de configuration.",
-            "MoonrakerRestartInstance": "Redémarrage Moonraker",
-            "MoonrakerRestartInstanceDescription": "Choisissez quel service Moonraker doit redémarrer lors d'un appui sur 'Save & Restart' après édition des fichiers de configuration.",
             "UseEscToClose": "Utiliser la touche \"esc\" pour fermer l'éditeur",
             "UseEscToCloseDescription": "Autoriser la touche \"esc\" de fermer l'éditeur."
         },
diff --git a/src/locales/hu.json b/src/locales/hu.json
index 6b45a7d02..ae1fad5c5 100644
--- a/src/locales/hu.json
+++ b/src/locales/hu.json
@@ -722,8 +722,6 @@
             "Editor": "Szerkesztő",
             "KlipperRestartMethod": "Klipper újraindítási mód",
             "KlipperRestartMethodDescription": "Válaszd ki milyen újraindítási módot használjunk a 'Ment és Újraindít' esetén, amikor a klipper konfig fájlait szerkeszted.",
-            "MoonrakerRestartInstance": "Moonraker példány Újraindítása",
-            "MoonrakerRestartInstanceDescription": "Válaszd ki melyik Moonraker szolgáltatást indítsuk újra a 'Ment és Újraindít' esetén, amikor a Moonraker konfig fájlait szerkeszted.",
             "UseEscToClose": "Kilépéshez nyomd meg az ESC gombot",
             "UseEscToCloseDescription": "Az ESC gomb megnyomása bezárja a szerkesztőt",
             "TabSize": "TAB Méret",
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 2542b8d7d..8747f4a2d 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -794,8 +794,6 @@
             "Editor": "エディター",
             "KlipperRestartMethod": "Klipper再始動の方法",
             "KlipperRestartMethodDescription": "Klipperの設定ファイルを編集する際に'保存して再始動'での再始動方法を選択してください。",
-            "MoonrakerRestartInstance": "Moonraker インスタンスの再始動",
-            "MoonrakerRestartInstanceDescription": "Moonrakerの設定ファイルを編集する際に'保存して再始動'で、どのMoonrakerサービスを再始動するか選択してください。",
             "UseEscToClose": "ESCキーでエディターを終了します。",
             "UseEscToCloseDescription": "ESCキーでエディターを終了できます。"
         },
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 64588313f..db66d0fb4 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -801,8 +801,6 @@
             "Editor": "파일 편집기",
             "KlipperRestartMethod": "클리퍼 재시작 방법",
             "KlipperRestartMethodDescription": "printer.cfg 파일을 수정 후, '저장 및 다시 시작'을 클릭할 때 사용할 다시 시작 방법을 선택합니다",
-            "MoonrakerRestartInstance": "문래커 재시작 방법",
-            "MoonrakerRestartInstanceDescription": "moonraker.conf 파일을 수정할 때 '저장 및 다시 시작'을 클릭할 때 사용할 문래커 서비스를 선택합니다",
             "UseEscToClose": "ESC키를 눌러 종료",
             "UseEscToCloseDescription": "ESC 키를 눌렀을 때 파일 편집기를 종료하며 만약 비활성화 했을 경우 ESC 키를 누르는 즉시 기존 입력 값은 모두 취소됩니다"
         },
diff --git a/src/locales/nl.json b/src/locales/nl.json
index 6c78544e0..264072fec 100644
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@@ -799,8 +799,6 @@
             "Editor": "Editor",
             "KlipperRestartMethod": "Klipper restart methode",
             "KlipperRestartMethodDescription": "Selecteerd welke herstart methode gebruikt wordt bij 'Save & Restart' na het bewerken van de Klipper config files.",
-            "MoonrakerRestartInstance": "Moonraker instantie herstarten",
-            "MoonrakerRestartInstanceDescription": "Selecteer welke Moonraker service herstart na 'Save & Restart' bij het bewerken van Moonraker config bestanden.",
             "UseEscToClose": "Gebruik ESC om de editor te sluiten",
             "UseEscToCloseDescription": "Laat de ESC toets de editor sluiten"
         },
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 28c02783b..4a6b935ef 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -134,7 +134,7 @@
             "Cancel": "Anuluj",
             "DoYouWantToStartFilename": "Czy chcesz rozpocząć druk {filename}?",
             "Headline": "Rozpocznij",
-            "Print": "wydruk",
+            "Print": "drukuj",
             "Timelapse": "Timelapse"
         }
     },
@@ -153,7 +153,7 @@
         "Uploading": "Wgrywanie"
     },
     "EmergencyStopDialog": {
-        "AreYouSure": "Jesteś pewien?",
+        "AreYouSure": "Czy na pewno?",
         "EmergencyStop": "Awaryjny STOP",
         "No": "Nie",
         "Yes": "Tak"
@@ -225,7 +225,8 @@
         "InvalidNameEmpty": "Pole wejściowe nie może być puste!",
         "ExtruderTemp": "Temp. ekstrudera",
         "Duplicate": "Duplikat",
-        "ScanMetaSuccess": "Pomyślnie przeskanowano metadane z: {filename}."
+        "ScanMetaSuccess": "Pomyślnie przeskanowano metadane z: {filename}.",
+        "DeleteSingleFileQuestion": "Czy na pewno chcesz usunąć plik \"{name}\"?"
     },
     "FullscreenUpload": {
         "CannotUploadFile": "Błąd wgrywania pliku!",
@@ -367,7 +368,8 @@
         "TotalPrinttime": "Łączny czas drukowania",
         "TotalTime": "Całkowity czas druku",
         "Chart": "Wykres",
-        "Table": "Tabela"
+        "Table": "Tabela",
+        "DeleteSingleJobQuestion": "Czy na pewno chcesz usunąć zadanie?"
     },
     "JobQueue": {
         "AllJobs": "Wszystkie wydruki",
@@ -420,7 +422,8 @@
             "Used": "Używane",
             "ConfigRootDirectoryDoesntExists": "Nie znaleziono katalogu konfiguracyjnego. Sprawdź opcję \"config_path\" w sekcji [file_manager] konfiguracji Moonrakera.",
             "Duplicate": "Duplikat",
-            "DuplicateFile": "Powielony plik"
+            "DuplicateFile": "Powielony plik",
+            "DeleteSingleFileQuestion": "Czy na pewno chcesz usunąć plik \"{name}\"?"
         },
         "EndstopPanel": {
             "Endstop": "Krańcówka",
@@ -474,17 +477,41 @@
             "CommittedYesterday": "Wydano wczoraj",
             "Detached": "Osobne",
             "Dirty": "brudny",
-            "ERROR": "BŁĄD",
             "Invalid": "Nieprawidłowe",
             "OSPackages": "Pakiety systemowe",
-            "PackagesCanBeUpgraded": "pakiety mogą być zaktualizowane",
             "System": "System",
             "Unknown": "nieznany",
             "Update": "Aktualizuj",
             "UpdateAll": "Zaktualizuj wszystko",
             "UpdateManager": "Menadżer aktualizacji",
             "Upgrade": "Uaktualnij",
-            "UpToDate": "aktualny"
+            "UpToDate": "aktualny",
+            "Abort": "Przerwij",
+            "GenericUpdateQuestion": "Sprawdź historię zmian (jeśli jest dostępna) i stronę GitHub dla tego projektu, aby sprawdzić, czy konieczne są jakiekolwiek ręczne korekty dla tej aktualizacji.",
+            "InitUpdateManager": "Menedżer aktualizacji nie został jeszcze zainicjowany. Jest to normalne zjawisko podczas pierwszego uruchomienia systemu. Kliknij przycisk odświeżania, aby zainicjować wszystkie komponenty.",
+            "MoonrakerUpdateQuestion": "Spowoduje to aktualizację API Moonraker. Zmiany w pliku moonraker.conf mogą być wymagane do dalszego korzystania z urządzenia.",
+            "Notification": {
+                "Dirty": "Lokalne repozytorium zostało zmodyfikowane i nie można go zaktualizować w tym stanie. Przywróć to repozytorium.",
+                "Detached": "Stan odłączony nie jest błędem ani problemem. Oznacza jedynie, że w lokalnym repozytorium istnieją dodatkowe zmiany, które nie istnieją w zdalnym repozytorium."
+            },
+            "StartUpdate": "Rozpocznij aktualizację",
+            "ThesePackagesCanBeUpgrade": "Te pakiety systemowe mogą być zaktualizowane:",
+            "WebClientUpdateQuestion": "W niektórych przypadkach aktualizacja klienta sieciowego może spowodować zmiany, które mogą spowodować niezgodność. Więcej informacji można znaleźć w uwagach wydania.",
+            "AreYouSure": "Czy na pewno?",
+            "Close": "Zamknij",
+            "CommitHistory": "Historia zmian",
+            "ConfigChanges": "Zmiany konfiguracji",
+            "CountPackagesCanBeUpgraded": "Można uaktualnić {count} pakietów",
+            "GitHubPage": "Strona GitHub",
+            "HardRecovery": "Przywróć twardo",
+            "IUnderstandTheRisks": "Rozumiem ryzyko",
+            "LinkToGithub": "Link do GitHub",
+            "KlipperUpdateQuestionFirmware": "Spowoduje to aktualizację oprogramowania hosta Klipper. Płyty sterujące z działającym firmware Klipper mogą wymagać flashowania ponownie skompilowanym firmware przed przywróceniem urządzenia do pracy.",
+            "KlipperUpdateQuestionConfig": "Ta aktualizacja może również zawierać zmiany w parametrach konfiguracyjnych, które będą musiały zostać zmodyfikowane w pliku printer.cfg, szczegóły można znaleźć w dzienniku zmian.",
+            "MoreCommitsInfo": "Można tu wyświetlić maksymalnie 30 zmian. Aby zobaczyć wszystkie zmiany, kliknij poniższy link:",
+            "SoftRecovery": "Przywróć miękko",
+            "UpdateWarning": "Ostrzeżenie o aktualizacji: {name}",
+            "UpgradeableSystemPackages": "Pakiety systemowe, które można uaktualnić"
         }
     },
     "Panels": {
@@ -684,7 +711,7 @@
         }
     },
     "PowerDeviceChangeDialog": {
-        "AreYouSure": "Jesteś pewien?",
+        "AreYouSure": "Czy na pewno?",
         "No": "Nie",
         "TurnDeviceOff": "Wyłącz {device}",
         "TurnDeviceOn": "Włącz {device}",
@@ -789,8 +816,6 @@
             "Editor": "Edytor",
             "KlipperRestartMethod": "Metoda restartu Klippera",
             "KlipperRestartMethodDescription": "Wybierz która metoda ponownego uruchomienia ma być używana podczas 'Zapisz i Uruchom ponownie' podczas edytowania plików konfiguracyjnych Klippera.",
-            "MoonrakerRestartInstance": "Ponowne uruchomienie instancji Moonrakera",
-            "MoonrakerRestartInstanceDescription": "Wybierz która metoda ponownego uruchomienia ma być używana podczas 'Zapisz i Uruchom ponownie' podczas edytowania plików konfiguracyjnych Moonrakera.",
             "UseEscToClose": "Naciśnij ESC, aby wyjść z edytora",
             "UseEscToCloseDescription": "Umożliwia zamknięcie edytora za pomocą klawisza ESC",
             "TabSize": "Rozmiar tabulacji",
@@ -820,7 +845,6 @@
             "DbHistoryTotals": "Historia łącznie",
             "DbTimelapseSettings": "Ustawienia timelapse",
             "DbView": "Ustawienia",
-            "DbWebcams": "Kamery",
             "EstimateValues": {
                 "Filament": "Filament",
                 "File": "Plik",
@@ -830,7 +854,6 @@
             "FactoryReset": "Ustawienia fabryczne",
             "General": "Ogólny",
             "Language": "Język",
-            "MoonrakerDb": "Baza danych Moonraker",
             "PrinterName": "Nazwa drukarki",
             "Reset": "reset",
             "Restore": "Przywróć",
@@ -846,7 +869,8 @@
                 "FileRelative": "Pozycja pliku (względna)",
                 "Slicer": "Slicer (M73)"
             },
-            "DateFormat": "Format daty"
+            "DateFormat": "Format daty",
+            "MainsailSettingsMoonrakerDb": "Ustawienia Mainsail w bazie danych Moonraker"
         },
         "InterfaceSettings": "Ustawienia interfejsu",
         "MacrosTab": {
@@ -984,10 +1008,10 @@
             "BoolBigThumbnailDescription": "Pokazuj dużą miniaturkę podczas wydruku.",
             "BoolHideUploadAndPrintButton": "Ukryj przycisk \"Wgraj i drukuj\"",
             "BoolHideUploadAndPrintButtonDescription": "Pokazuj lub ukrywaj przycisk \"Prześlij i drukuj\" na górnym pasku.",
-            "ConfirmOnEmergencyStop": "Potwierdzenie Nagłego Zatrzymania",
-            "ConfirmOnEmergencyStopDescription": "Pokazuj dialog potwierdzenia po naciśnięciu Nagłego Zatrzymania",
+            "ConfirmOnEmergencyStop": "Potwierdzenie awaryjnego zatrzymania",
+            "ConfirmOnEmergencyStopDescription": "Pokazuj dialog potwierdzenia po naciśnięciu Awaryjny STOP",
             "ConfirmOnPowerDeviceChange": "Potwierdzenie dla zmiany zasilania urządzenia",
-            "ConfirmOnPowerDeviceChangeDescription": "Wyświetlaj okno dialogowe potwierdzenia przy zmianach zasilania urządzenia.",
+            "ConfirmOnPowerDeviceChangeDescription": "Wyświetlaj okno dialogowe potwierdzenia przy zmianach zasilania urządzenia",
             "DisplayCANCEL_PRINT": "Pokazuj przycisk ANULUJ_WYDRUK",
             "DisplayCANCEL_PRINTDescription": "Pokazuje przycisk ANULUJ_WYDRUK permamentnie - brak potrzeby drugiej warstwy.",
             "GcodeThumbnails": "Pokazuj miniaturki",
@@ -1017,7 +1041,9 @@
             "ScrewsTiltAdjustDialog": "Okno dialogowe regulacji nachylenia śrubami",
             "TempchartHeight": "Wykres temperatury - wysokość",
             "TempchartHeightDescription": "Modyfikuj wysokość wykresu temperatury w panelu sterowania.",
-            "PowerDeviceName": "Urządzenie zasilające drukarkę"
+            "PowerDeviceName": "Urządzenie zasilające drukarkę",
+            "HideUpdateWarnings": "Ukryj ostrzeżenia o aktualizacji",
+            "HideUpdateWarningsDescription": "Ta opcja ukryje wszystkie ostrzeżenia o aktualizacjach w menedżerze aktualizacji."
         },
         "WebcamsTab": {
             "AddWebcam": "Dodaj kamerę",
@@ -1134,7 +1160,8 @@
         "Used": "Używane",
         "Variable": "Zmienne",
         "Video": "Filmy",
-        "DeleteSelectedQuestion": "Czy na pewno chcesz usunąć {count} wybranych plików?"
+        "DeleteSelectedQuestion": "Czy na pewno chcesz usunąć {count} wybranych plików?",
+        "DeleteSingleFileQuestion": "Czy na pewno chcesz usunąć plik \"{name}\"?"
     },
     "title": "Polski",
     "BedScrews": {
diff --git a/src/locales/pt.json b/src/locales/pt.json
index 06784c61a..290597e79 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -807,8 +807,6 @@
             "Editor": "Editor",
             "KlipperRestartMethod": "Método para reiniciar Klipper",
             "KlipperRestartMethodDescription": "Selecione o método de reinicialização que será usado em 'Salvar e Reiniciar' ao editar arquivos de configuração do Klipper.",
-            "MoonrakerRestartInstance": "Reiniciar a instância do Moonraker",
-            "MoonrakerRestartInstanceDescription": "Selecione qual serviço do Moonraker será reiniciado em 'Salvar e Reiniciar' ao editar arquivos de configuração do Moonraker.",
             "Spaces": "Espaços: {count}",
             "TabSize": "Tamanho TAB",
             "TabSizeDescription": "Ajusta quantos espaços devem ser usados para a indentação de TAB.",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 6458e58de..d66c97f1b 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -801,8 +801,6 @@
             "Editor": "Редактор",
             "KlipperRestartMethod": "Способ перезапуска Klipper",
             "KlipperRestartMethodDescription": "Выберите какой способ перезапуска Klipper будет использоваться, после нажатия 'СОХРАНИТЬ И ПЕРЕЗАПУСТИТЬ' при редактировании конфигурационных файлов Klipper.",
-            "MoonrakerRestartInstance": "Способ перезапуска Moonraker",
-            "MoonrakerRestartInstanceDescription": "Выберите какой способ перезапуска Moonraker будет использоваться, после нажатия 'СОХРАНИТЬ И ПЕРЕЗАПУСТИТЬ' при редактировании конфигурационных файлов Moonraker.",
             "UseEscToClose": "Использование клавиши ESC",
             "UseEscToCloseDescription": "Позволяет использовать клавишу ESC для закрытия редактора",
             "TabSize": "Размер табуляции",
diff --git a/src/locales/sv.json b/src/locales/sv.json
index 97af8c162..b73a32519 100644
--- a/src/locales/sv.json
+++ b/src/locales/sv.json
@@ -620,8 +620,6 @@
             "Editor": "Redigerare",
             "KlipperRestartMethod": "Klipper omstartsmetod",
             "KlipperRestartMethodDescription": "Välj vilken omstartsmetod som ska användas på 'Spara och starta om' vid redigering av Klipper-konfigurationsfiler.",
-            "MoonrakerRestartInstance": "Starta om Moonraker instans",
-            "MoonrakerRestartInstanceDescription": "Välj vilken Moonraker-tjänst som ska startas om under \"Spara och starta om\" när du redigerar Moonraker-konfigurationsfiler.",
             "UseEscToClose": "Använd ESC för att stänga redigeringsprogrammet",
             "UseEscToCloseDescription": "Tillåter att ESC-tangenten stänger redigeraren"
         },
diff --git a/src/locales/tr.json b/src/locales/tr.json
index e8ac443f2..d8675198a 100644
--- a/src/locales/tr.json
+++ b/src/locales/tr.json
@@ -1,22 +1,22 @@
 {
     "App": {
         "Notifications": {
-            "DependencyDescription": "Mevcut {name} sürümü, Mainsail'in tüm özelliklerini desteklemiyor. {name}'yi en az {neededVersion} olarak güncelleyin.",
-            "DependencyName": "Bağımlılık: {isim}",
+            "DependencyDescription": "Geçerli {name} sürümü, Mainsail'in tüm özelliklerini desteklemiyor. {name} ürününü en az {neededVersion} sürümüne güncelleyin.",
+            "DependencyName": "Bağımlılık: {name}",
             "DismissAll": "Hepsini reddet",
             "KlipperWarnings": {
-                "DeprecatedOption": "'{section}' bölümündeki '{option}' seçeneği tedavülden kaldırılmıştır ve gelecekteki bir sürümde kaldırılacaktır.",
-                "DeprecatedOptionHeadline": "Kullanımdan Kaldırılan Klipper Ayarı",
-                "DeprecatedValue": "'{section}' bölümündeki '{option}' seçeneğindeki '{value}' değeri tedavülden kaldırılmıştır ve gelecekteki bir sürümde kaldırılacaktır.",
-                "DeprecatedValueHeadline": "Kullanımdan Kaldırılan Klipper Değeri",
+                "DeprecatedOption": "'{section}' bölümündeki '{option}' seçeneği eskimiştir ve gelecekteki bir sürümde kaldırılacaktır.",
+                "DeprecatedOptionHeadline": "Eskimiş Klipper Seçeneği",
+                "DeprecatedValue": "'{section}' bölümündeki '{option}' seçeneğindeki '{value}' değeri eskimiştir ve gelecekteki bir sürümde kaldırılacaktır.",
+                "DeprecatedValueHeadline": "Eskimiş Klipper Değeri",
                 "KlipperWarning": "Klipper uyarısı"
             },
             "MoonrakerWarnings": {
                 "MoonrakerComponent": "Moonraker: {component}",
-                "MoonrakerFailedComponentDescription": "Moonraker bileşeni '{component}' yüklenirken bir hata algılandı. Lütfen günlük dosyasını kontrol edin ve sorunu düzeltin.",
+                "MoonrakerFailedComponentDescription": "Moonraker bileşeni '{component}' yüklenirken bir hata tespit edildi. Lütfen günlük dosyasını kontrol edin ve sorunu düzeltin.",
                 "MoonrakerWarning": "Moonraker uyarısı",
-                "UnparsedConfigOption": "[{section}] bölümünde ayrıştırılmamış yapılandırma seçeneği '{option}: {value}' algılandı. Bu, artık mevcut olmayan bir seçenek olabilir veya yüklenemeyen bir modülün sonucu olabilir. Gelecekte bu bir başlatma hatasıyla sonuçlanacaktır.",
-                "UnparsedConfigSection": "Ayrıştırılmamış yapılandırma bölümü [{section}] algılandı. Bu, yüklenemeyen bir bileşenin sonucu olabilir. Gelecekte bu bir başlatma hatasıyla sonuçlanacaktır."
+                "UnparsedConfigOption": "[{section}] bölümünde ayrıştırılmamış yapılandırma seçeneği '{option}: {value}' algılandı. Bu, artık kullanılamayan bir seçenek olabilir veya yüklenemeyen bir modülün sonucu olabilir. Gelecekte bu, bir başlatma hatasına neden olacaktır.",
+                "UnparsedConfigSection": "Ayrıştırılmamış yapılandırma bölümü [{section}] algılandı. Bu, yüklenemeyen bir bileşenin sonucu olabilir. Gelecekte bu, bir başlatma hatasına neden olacaktır."
             },
             "Never": "asla",
             "NextReboot": "sonraki yeniden başlatma",
@@ -25,75 +25,81 @@
             "Remind": "Hatırlat:"
         },
         "NumberInput": {
-            "GreaterOrEqualError": "{min} değerinden büyük veya eşit olmalıdır!",
-            "MustBeBetweenError": "{min} ile {max} arasında olmalıdır!",
+            "GreaterOrEqualError": " {min}değerinden büyük veya eşit olmalıdır!",
+            "MustBeBetweenError": "{min} değerinden büyük veya eşit olmalıdır!",
             "NoEmptyAllowedError": "Giriş boş olmamalıdır!"
         },
         "Printers": "Yazıcılar",
+        "TheServiceWorker": {
+            "DescriptionNeedUpdate": "Yerel önbellek eski ve güncellenmesi gerekiyor. Önbelleği güncellemek için lütfen aşağıdaki düğmeyi tıklayın.",
+            "TitleNeedUpdate": "PWA güncellenmek istiyor",
+            "Update": "güncelle"
+        },
         "ThrottledStates": {
             "DescriptionCurrentlyThrottled": "rPi ARM çekirdek(ler)i şu anda kısılmış durumda.",
             "DescriptionFrequencyCapped": "rPi ARM maksimum frekansı şu anda 1,2 GHz ile sınırlıdır.",
             "DescriptionPreviouslyFrequencyCapped": "rPi ARM maksimum frekansı, son açılıştan bu yana en az bir kez 1,2 GHz ile sınırlandırılmıştır.",
-            "DescriptionPreviouslyTemperatureLimited": "rPi uC (yalnızca 3A+/3B+) sıcaklığı, son açılıştan bu yana yumuşak sınırın (varsayılan 60C) en az bir kez üzerindeydi.",
-            "DescriptionPreviouslyThrottled": "rPI ARM çekirdek(ler)i, son açılıştan bu yana en az bir kez kısıldı.",
-            "DescriptionPreviouslyUnderVolted": "rPI besleme voltajı, son açılıştan bu yana en az bir kez 4,65V'nin altına düştü.",
-            "DescriptionTemperatureLimitActive": "rPi uC (yalnızca 3A+/3B+) sıcaklığı şu anda yumuşak sınırın üzerinde (varsayılan 60C).",
-            "DescriptionUnderVoltageDetected": "rPI besleme voltajı şu anda 4,65V'un altında",
-            "TitleCurrentlyThrottled": "Şu Anda Kısılmış",
-            "TitleFrequencyCapped": "Sınırlandırılmış Frekans",
-            "TitlePreviouslyFrequencyCapped": "Önceden Sınırlandırılmış Frekans",
-            "TitlePreviouslyTemperatureLimited": "Önceden Sınırlandırılmış Sıcaklık",
+            "DescriptionPreviouslyTemperatureLimited": "rPi uC (yalnızca 3A+/3B+) sıcaklığı, son açılıştan bu yana en az bir kez yumuşak limitin (varsayılan 60C) üzerindeydi.",
+            "DescriptionPreviouslyThrottled": "rPI ARM çekirdeği/çekirdekleri, son açılıştan bu yana en az bir kez kısıldı.",
+            "DescriptionPreviouslyUnderVolted": "rPI besleme voltajı, son açılıştan bu yana en az bir kez 4,65V'un altına düştü.",
+            "DescriptionTemperatureLimitActive": "rPi uC (yalnızca 3A+/3B+) sıcaklığı şu anda yumuşak limitin (varsayılan 60C) üzerinde.",
+            "DescriptionUnderVoltageDetected": "rPI besleme voltajı şu anda 4,65V'nin altında",
+            "TitleCurrentlyThrottled": "Şu anda Kısılmış",
+            "TitleFrequencyCapped": "Frekans Sınırlı",
+            "TitlePreviouslyFrequencyCapped": "Önceden Frekans Sınırlanmış",
+            "TitlePreviouslyTemperatureLimited": "Önceden Sıcaklık Sınırlandırılmış",
             "TitlePreviouslyThrottled": "Önceden Kısılmış",
-            "TitlePreviouslyUnderVolted": "Önceden Düşük Voltaj",
+            "TitlePreviouslyUnderVolted": "Önceden Düşük Voltajla Beslenmiş",
             "TitleTemperatureLimitActive": "Sıcaklık Limiti Aktif",
-            "TitleUnderVoltageDetected": "Düşük Voltaj Algılandı"
+            "TitleUnderVoltageDetected": "Düşük Voltaj Tespit Edildi"
         },
         "Titles": {
-            "Complete": "Tamamlandı - {filename}",
+            "Complete": "{filename} - tamamlandı",
             "Error": "HATA",
-            "Pause": "Baskı Duraklatıldı",
-            "Printing": "{percent}% Baskı - {filename}",
-            "PrintingETA": "{percent}% Baskı - Tahmini Bitiş Süresi: {eta} - {filename}"
+            "Pause": "Baskıyı Duraklat",
+            "PrinterOff": "Yazıcı Kapalı",
+            "Printing": "{percent}% Yazdırılıyor - {filename}",
+            "PrintingETA": "{percent}% Yazdırılıyor - ETA: {eta} - {filename}"
         },
         "TopBar": {
             "CannotUploadTheFile": "Dosya yüklenemiyor!",
-            "EmergencyStop": "Acil Durdurma",
+            "EmergencyStop": "Acil Stop",
             "SAVE_CONFIG": "YAPILANDIRMAYI KAYDET",
-            "Uploading": "Yükleniyor",
-            "UploadOfFileSuccessful": "{file} yüklemesi başarılı!",
+            "Uploading": "Karşıya Yükleniyor",
+            "UploadOfFileSuccessful": "{file} karşıya yüklemesi başarılı!",
             "UploadPrint": "Yükle ve Yazdır"
         },
         "TopCornerMenu": {
             "Cancel": "İptal Et",
             "ConfirmationDialog": {
                 "Description": {
-                    "HostReboot": "Ana Bilgisayarı yeniden başlatmak, geçerli yazdırmanın başarısız olmasına neden olur!",
-                    "HostShutdown": "Ana Bilgisayarı kapatmak, mevcut baskının başarısız olmasına neden olur!",
-                    "KlipperFirmwareRestart": "Klipper Bellenimini yeniden başlatmak, mevcut baskının başarısız olmasına neden olur!",
-                    "KlipperRestart": "Klipper'ı yeniden başlatmak, mevcut baskının başarısız olmasına neden olacak!",
-                    "KlipperStop": "Klipper'ı durdurmak, mevcut baskının başarısız olmasına neden olacak!",
-                    "ServiceRestart": "Bu hizmeti yeniden başlatmak, geçerli yazdırmanın başarısız olmasına neden olabilir!",
-                    "ServiceStart": "Bu hizmeti başlatmak, mevcut baskının başarısız olmasına neden olabilir!",
-                    "ServiceStop": "Bu hizmeti durdurmak, mevcut baskının başarısız olmasına neden olabilir!"
+                    "HostReboot": "Ana Bilgisayarı yeniden başlatmak geçerli baskının başarısız olmasına neden olur!",
+                    "HostShutdown": "Ana Bilgisayarı kapatmak mevcut baskının başarısız olmasına neden olur!",
+                    "KlipperFirmwareRestart": "Klipper Yazılımını yeniden başlatmak mevcut baskının başarısız olmasına neden olur!",
+                    "KlipperRestart": "Klipper'ı yeniden başlatmak mevcut baskının başarısız olmasına neden olur!",
+                    "KlipperStop": "Klipper'ı durdurmak mevcut baskının başarısız olmasına neden olur!",
+                    "ServiceRestart": "Bu hizmeti yeniden başlatmak, geçerli baskının başarısız olmasına neden olabilir!",
+                    "ServiceStart": "Bu hizmeti başlatmak, geçerli baskının başarısız olmasına neden olabilir!",
+                    "ServiceStop": "Bu hizmetin durdurulması mevcut baskının başarısız olmasına neden olabilir!"
                 },
                 "Title": {
-                    "HostReboot": "Ana Bilgisayarı Yeniden Başlatma",
-                    "HostShutdown": "Ana Bilgisayarı Kapatma",
-                    "KlipperFirmwareRestart": "Klipper Bellenimini Yeniden Başlatma",
-                    "KlipperRestart": "Klipper Yeniden Başlatma",
-                    "ServiceRestart": "Hizmet Yeniden Başlatma",
+                    "HostReboot": "Ana Bilgisayar Yeniden Başlat",
+                    "HostShutdown": "Ana Bilgisayar Kapat",
+                    "KlipperFirmwareRestart": "Klipper Yazılımını Yeniden Başlat",
+                    "KlipperRestart": "Klipper'ı Yeniden Başlat",
+                    "ServiceRestart": "Hizmet Yeniden Başlat",
                     "ServiceStart": "Hizmet Başlat",
                     "ServiceStop": "Hizmet Durdur"
                 }
             },
             "HostControl": "Ana Bilgisayar Kontrolü",
             "KlipperControl": "Klipper Kontrolü",
-            "KlipperFirmwareRestart": "Bellenim Yeniden Başlatma",
-            "KlipperRestart": "Yeniden Başlatma",
+            "KlipperFirmwareRestart": "Yazılım'ı Yeniden Başlat",
+            "KlipperRestart": "Yeniden Başlat",
             "PowerDevices": "Güç Cihazları",
-            "Reboot": "Tekrar Yükle",
+            "Reboot": "Yeniden Önyükle",
             "Restart": "Yeniden Başlat",
-            "ServiceControl": "Hizmet Kontrolü",
+            "ServiceControl": "Hizmet kontrolü",
             "Shutdown": "Kapat",
             "Start": "Başlat",
             "Stop": "Durdur"
@@ -114,24 +120,24 @@
         "Description": "Mevcut vida ayarlandıysa <b>ADJUSTED</b> seçeneğine tıklayın. Ayarlama yapmadan devam etmek için <b>ACCEPT</b>'i tıklayın.",
         "Headline": "Tabla Vidaları",
         "ScrewAccepted": "Vidalar kabul edildi",
-        "ScrewIndex": "Vida Endeksi",
+        "ScrewIndex": "Vida İbresi",
         "ScrewName": "Vida İsmi",
         "ScrewOutput": "{current} / {max}"
     },
     "ConnectionDialog": {
         "CannotConnectTo": "Moonraker'a ({host}) bağlanılamıyor.",
-        "CheckMoonrakerLog": "Bu mesaj tekrar tekrar görünüyorsa, lütfen şu adreste bulunan günlük dosyasına bakın:",
-        "Connecting": "{host}'a bağlanılıyor",
-        "Failed": "Bağlantı başarısız",
+        "CheckMoonrakerLog": "Bu mesaj tekrar tekrar görünüyorsa, lütfen şu adreste bulunan log dosyasına bakın:",
+        "Connecting": "{host }ile bağlantı kuruluyor",
+        "Failed": "Bağlantı başarısız oldu",
         "Initializing": "Başlatılıyor",
-        "TryAgain": "Tekrar deneyin"
+        "TryAgain": "yeniden dene"
     },
     "Console": {
         "CommandList": "Komut listesi",
         "Empty": "Boş",
-        "HideTemperatures": "Sıcaklıkları Gizle",
-        "HideTimelapse": "Timelapse'i Gizle",
-        "SendCode": "Kodu gönder...",
+        "HideTemperatures": "Sıcaklıkları gizle.",
+        "HideTimelapse": "Timelapse'i gizle",
+        "SendCode": "Kod gönder..",
         "SetupConsole": "Kurulum Konsolu"
     },
     "Dialogs": {
@@ -146,177 +152,189 @@
     "Editor": {
         "ConfigReference": "Yapılandırma Referansı",
         "DontSave": "Kaydetme",
-        "Downloading": "İndiriliyor",
+        "Downloading": "İndiriliyor.",
         "FailedSave": "{filename} yüklenemedi!",
-        "FileReadOnly": "Salt-oku",
-        "SaveClose": "Kaydet & Kapat",
-        "SaveRestart": "Kaydet & Yeniden Başlat",
+        "FileReadOnly": "salt-oku",
+        "SaveClose": "Kaydet ve Kapat",
+        "SaveRestart": "Kaydet ve Yeniden Başlat",
         "SuccessfullySaved": "{filename} başarıyla kaydedildi.",
         "UnsavedChanges": "Kaydedilmemiş Değişiklikler",
-        "UnsavedChangesMessage": "{filename} dosyasında yaptığınız değişiklikleri kaydetmek istiyor musunuz??",
-        "UnsavedChangesSubMessage": "Kaydetmezseniz değişiklikleriniz kaybolacak. Bu mesajı editör ayarlarından devre dışı bırakabilirsiniz.",
+        "UnsavedChangesMessage": "{filename} üzerinde yaptığınız değişiklikleri kaydetmek istiyor musunuz?",
+        "UnsavedChangesSubMessage": "Kaydetmezseniz değişiklikleriniz kaybolacaktır. Bu mesajı düzenleyici ayarlarından devre dışı bırakabilirsiniz.\n",
         "Uploading": "Karşıya Yükleniyor"
     },
     "EmergencyStopDialog": {
-        "AreYouSure": "Emin Misiniz?",
+        "AreYouSure": "Emin misiniz?",
         "EmergencyStop": "Acil Stop",
         "No": "Hayır",
         "Yes": "Evet"
     },
     "Files": {
+        "AddBatchToQueue": "Partiyi Kuyruğa ekle",
         "AddToQueue": "Sıraya ekle",
         "AllFiles": "Hepsi",
         "BedTemp": "Tabla Sıcaklığı",
-        "Cancel": "İptal Et",
-        "ChamberTemp": "Bölme Sıcaklığı",
+        "Cancel": "İptal et",
+        "ChamberTemp": "Kafes Sıcaklığı",
+        "Count": "Say",
         "Create": "Oluştur",
-        "CreateNewDirectory": "Yeni dizin oluştur",
+        "CreateNewDirectory": "Yeni Dizin oluştur",
         "CurrentPath": "Şuanki yol",
         "Delete": "Sil",
-        "DeleteDirectory": "Dizini Sil",
-        "DeleteDirectoryQuestion": "\"{name}\" dizinini tüm içeriğiyle birlikte gerçekten silmek istiyor musunuz?",
+        "DeleteDirectory": "Dizini sil",
+        "DeleteDirectoryQuestion": "\"{name}\" dizinini tüm içeriğiyle gerçekten silmek istiyor musunuz?",
         "DeleteSelectedQuestion": "Seçilen {count} dosyayı gerçekten silmek istiyor musunuz?",
+        "DeleteSingleFileQuestion": "\"{name}\" dosyasını gerçekten silmek istiyor musunuz?",
         "Download": "İndir",
-        "EditFile": "Dosyayı Düzenle",
+        "Duplicate": "Çiftle",
+        "DuplicateFile": "Dosyayı Çiftle",
+        "EditFile": "Dosyayı düzenle",
         "Empty": "Boş",
-        "ExtruderTemp": "Ekstrüder Sıcaklığı",
+        "ExtruderTemp": "Ekstruder Sıcaklığı",
         "Filament": "Filament",
-        "FilamentName": "Filament İsmi",
+        "FilamentName": "Filament Adı",
         "FilamentType": "Filament Tipi",
-        "FilamentUsage": "Filament Kullanımı",
+        "FilamentUsage": "Filament kullanımı",
         "FilamentWeight": "Filament Ağırlığı",
         "Files": "Dosyalar",
-        "Filesize": "Dosya Boyutu",
+        "Filesize": "Dosya boyutu",
         "Free": "Boş",
         "FreeDisk": "Boş disk",
         "GCodeFiles": "G-Kod Dosyaları",
-        "GcodesRootDirectoryDoesntExists": "G-Kod dizini bulunamadı. Lütfen Klipper yapılandırmasının [virtual_sdcard] bölümündeki \"path\" seçeneğini işaretleyin.",
-        "HiddenFiles": "Gizli Dosyalar",
-        "InvalidNameAlreadyExists": "İsim zaten var, lütfen başka bir isim seçin.",
+        "GcodesRootDirectoryDoesntExists": "G-Kod dizini bulunamadı. Lütfen Klipper yapılandırmasının [virtual_sdcard] bölümündeki \"yol\" seçeneğini işaretleyin.",
+        "HiddenFiles": "Gizlenmiş dosyalar",
+        "InvalidNameAlreadyExists": "Ad zaten var, lütfen başka bir ad seçin.",
         "InvalidNameEmpty": "Giriş boş olmamalıdır!",
         "LastEndTime": "Son Bitiş Zamanı",
-        "LastFilamentUsed": "Son Filament Kullanımı",
-        "LastModified": "Son Düzenleme",
+        "LastFilamentUsed": "Kullanılan Son Filament",
+        "LastModified": "Son düzenleme",
         "LastPrintDuration": "Son Baskı Süresi",
-        "LastStartTime": "Son Başlangıç Saati",
+        "LastStartTime": "Son Başlangıç Zamanı",
         "LastTotalDuration": "Son Toplam Süre",
         "LayerHeight": "Katman Yüksekliği",
-        "Name": "İsim",
+        "Name": "Isim",
         "NewDirectory": "Yeni Dizin",
         "NozzleDiameter": "Nozül Çapı",
         "ObjectHeight": "Nesne Yüksekliği",
-        "Preheat": "Ön Isınma",
-        "PrintedFiles": "Yazdırılan Dosyalar",
-        "PrintStart": "Baskı Başlangıcı",
+        "Preheat": "Ön ısıtma",
+        "PrintedFiles": "Basılmış dosyalar",
+        "PrintStart": "Baskı başlangıcı",
         "PrintTime": "Baskı Süresi",
-        "RefreshCurrentDirectory": "Geçerli Dizini Yenile",
-        "Rename": "Yeniden İsimlendir",
-        "RenameDirectory": "Dizini Yeniden İsimlendir",
-        "RenameFile": "Dosyayı Yeniden İsimlendir",
+        "RefreshCurrentDirectory": "Geçerli Dizini yenile",
+        "Rename": "Yeniden Adlandır",
+        "RenameDirectory": "Dizini Yeniden Adlandır",
+        "RenameFile": "Dosyayı yeniden adlandır",
+        "ScanMeta": "Meta Verileri Tara",
+        "ScanMetaSuccess": "Şu kaynaktan meta veriler başarıyla tarandı: {filename}.",
         "Search": "Ara",
         "SetupCurrentList": "Geçerli listeyi ayarla",
         "Slicer": "Dilimleyici",
-        "SuccessfullyCreated": "{filename} başarıyla oluşturuldu.",
-        "SuccessfullyDeleted": "{filename} başarıyla silindi.",
-        "SuccessfullyMoved": "{filename} başarıyla taşındı.",
-        "SuccessfullyRenamed": "{filename} başarıyla yeniden adlandırıldı.",
-        "SuccessfullyUploaded": "{filename} dosyası başarıyla yüklendi!",
+        "SuccessfullyCreated": " {filename}başarıyla oluşturuldu.",
+        "SuccessfullyDeleted": " {filename}başarıyla silindi.",
+        "SuccessfullyMoved": " {filename}başarıyla taşındı.",
+        "SuccessfullyRenamed": " {filename}başarıyla yeniden adlandırıldı.",
+        "SuccessfullyUploaded": " {filename} yükleme başarılı!",
         "Total": "Toplam",
         "UploadNewGcode": "Yeni G-Kod yükle",
         "Used": "Kullanılmış",
-        "View3D": "3D görüntüle"
+        "View3D": "3D Görüntüle"
     },
     "FullscreenUpload": {
-        "CannotUploadFile": "Dosya Yüklenemiyor!",
-        "DropFilesToUploadFiles": "Dosyaları yüklemek için sürükleyiniz"
+        "CannotUploadFile": "Dosya yüklenemiyor!",
+        "DropFilesToUploadFiles": "Yüklenecek dosyaları bırakın"
     },
     "GCodeViewer": {
         "ClearLoadedFile": "Temizle",
-        "ColorMode": "Renk Modu",
+        "CNCMode": "CNC Modu",
+        "ColorMode": "Renk modu",
         "Downloading": "İndiriliyor",
-        "ForceLineRendering": "Çizgi Oluşturmayı Zorla",
+        "ForceLineRendering": "Çizgi İşlemeyi Zorla",
         "HDRendering": "HD İşleme (Yuvarlak Ekstrüzyonlar)",
         "High": "Yüksek",
-        "LoadCurrentFile": "Şu anki Dosya",
-        "LoadLocal": "Yerel Dosya",
+        "LoadCurrentFile": "Geçerli dosya",
+        "LoadLocal": "Yerel dosya",
         "Low": "Düşük",
-        "Max": "Maksimum",
+        "Max": "Maks",
         "Medium": "Orta",
         "ReloadRequired": "Yeniden yükleme gerekli",
-        "Rendering": "İşleniyor",
-        "RenderQuality": "İşleme Kalitesi",
+        "Rendering": "İşleme",
+        "RenderQuality": "Render kalitesi",
+        "ShowGCode": "G-Kodunu Göster",
         "ShowObjectSelection": "Nesne Seçimini Göster",
-        "ShowToolhead": "Araç Başlığını Göster",
+        "ShowToolhead": "Baskı Kafasını Göster",
         "ShowTravelMoves": "Seyahat Hareketlerini Göster",
-        "SpecularLighting": "Aynalı Aydınlatma",
-        "Title": "G-Kod İzleyici",
-        "Tracking": "İzleme",
+        "SpecularLighting": "Speküler Aydınlatma",
+        "Title": "G-Kod Görüntüleyici",
+        "Tracking": "Izleme",
         "Transparency": "Şeffaflık",
         "Ultra": "Ultra",
         "VoxelMode": "Voksel Modu (ASMBL)"
     },
     "Heightmap": {
-        "Abort": "iptal et",
-        "BedMeshCalibrate": "Tabla Örgü Kalibrasyonu Yap",
-        "BedMeshRemove": "Tabla Örgü Kalibrasyonu Kaldır",
-        "Calibrate": "kalibre et",
+        "Abort": "İptal",
+        "BedMeshCalibrate": "Tabla Mesh Kalibrasyonu",
+        "BedMeshRemove": "Tabla Mesh Kaldır",
+        "Calibrate": "Kalibre et",
         "Clear": "temizle",
         "CurrentMesh": {
-            "Headline": "Mevcut Örgü",
-            "Max": "Max",
+            "Headline": "Geçerli Mesh",
+            "Max": "Maks",
             "Min": "Min",
-            "Name": "İsim",
+            "Name": "Isim",
             "Range": "Menzil",
             "Size": "Boyut"
         },
-        "DeleteBedMeshProfile": "Tabla Örgü Profilini Sil",
+        "DeleteBedMeshProfile": "Tabla Mesh Profilini Sil",
         "DoYouReallyWantToDelete": "\"{name}\" profilini gerçekten silmek istiyor musunuz?",
-        "ErrorKlipperNotReady": "Klipper hazır değil. Yükseklik haritası devre dışı bırakıldı.",
+        "ErrorKlipperNotReady": "Klipper hazır değil. Yükseklik haritası devre dışı.",
         "Flat": "Düz",
-        "Heightmap": "Yükseklik Haritası",
-        "InvalidNameAlreadyExists": "Profil adı zaten var, lütfen başka bir profil adı seçin.",
+        "Heightmap": "Yükseklik haritası",
+        "InvalidNameAlreadyExists": "Profil adı zaten mevcut, lütfen başka bir profil adı seçin.",
+        "InvalidNameAscii": "İsim geçersiz. Yalnızca ascii karakterine izin verilir.",
         "InvalidNameEmpty": "Giriş boş olmamalıdır!",
         "InvalidNameReserved": "Profil 'varsayılan' ayrılmıştır, lütfen başka bir profil adı seçin.",
         "Later": "Sonra",
-        "Mesh": "Örgü",
-        "Name": "İsim",
-        "NoBedMeshHasBeenLoadedYet": "Henüz bir tabla örgüsü yüklenmedi.",
-        "NoProfile": "Profil yok",
-        "Ok": "OK",
-        "Probed": "Problanmış",
+        "Mesh": "Mesh",
+        "Name": "Isim",
+        "NoBedMeshHasBeenLoadedYet": "Henüz hiçbir tabla mesh'i yüklenmedi.",
+        "NoProfile": "Kullanılabilir profil yok",
+        "Ok": "Tamam",
+        "Probed": "Problandı",
         "Profiles": "Profiller",
-        "Remove": "Sil",
-        "RemoveSaveDescription": "Tabla_Örgü profili silinmiş olarak kaydedildi. printer.cfg'den kaldırmak için YAPILANDIRMAYI_KAYDET'e tıklayın ve Klipper'ı yeniden başlatın.",
+        "Remove": "sil",
+        "RemoveSaveDescription": "Bed_mesh profili silinmiş olarak kaydedilmiştir. Bunu printer.cfg'den kaldırmak için SAVE_CONFIG'e tıklayın ve Klipper'ı yeniden başlatın.",
         "Rename": "yeniden adlandır",
-        "RenameBedMeshProfile": "Tabla Örgü Profilini Yeniden Adlandır",
-        "SAVE_CONFIG": "YAPILANDIRMAYI_KAYDET",
+        "RenameBedMeshProfile": "Tabla Mesh Profilini Yeniden Adlandır",
+        "SAVE_CONFIG": "SAVE_CONFIG",
         "ScaleGradient": "Ölçek gradyanı",
-        "ScaleZMax": "z-max'ı ölçeklendir",
-        "TitleCalibrate": "Yeni tabla örgüsü kalibre edin",
-        "TitleClear": "Tabla örgüsünü temizleyin",
-        "TitleHomeAll": "Hepsini home'la",
-        "Wireframe": "Tel-kafes"
+        "ScaleZMax": "Z-maks ölçeklendirin.",
+        "TitleCalibrate": "Yeni tabla mesh'ini kalibre et",
+        "TitleClear": "Tabla mesh'ini temizle",
+        "TitleHomeAll": "Hepsini sıfırla",
+        "Wireframe": "Wireframe"
     },
     "History": {
         "AddNote": "Not ekle",
-        "AllJobs": "Hepsi",
+        "AllJobs": "hepsi",
         "AvgPrinttime": "Baskı Süresi - Ø",
-        "Cancel": "İptal Et",
-        "CreateNote": "Not Oluştur",
+        "Cancel": "İptal et",
+        "Chart": "Grafik",
+        "CreateNote": "Not oluştur",
         "Delete": "Sil",
         "DeleteSelectedQuestion": "Seçilen {count} işi gerçekten silmek istiyor musunuz?",
-        "Details": "Detaylar",
-        "EditNote": "Notu Düzenle",
+        "DeleteSingleJobQuestion": "İşi gerçekten silmek istiyor musunuz?",
+        "Details": "Ayrıntılar",
+        "EditNote": "Notu düzenle",
         "Empty": "boş",
-        "EndTime": "Bitme Zamanı",
+        "EndTime": "Bitiş zamanı",
         "EstimatedFilament": "Tahmini Filament",
         "EstimatedFilamentWeight": "Tahmini Filament Ağırlığı",
-        "EstimatedTime": "Tahmini Süre",
-        "FilamentCalc": "Hesaplanmış Filament",
+        "EstimatedTime": "Tahmini süre",
+        "FilamentCalc": "Filament Hesaplanan",
         "FilamentUsage": "Filament kullanımı",
-        "FilamentUsed": "Filament Kullanıldı",
-        "Filename": "Dosyaadı",
-        "Filesize": "Dosyaboyutu",
+        "FilamentUsed": "Kullanılan Filament",
+        "Filename": "Dosya adı",
+        "Filesize": "Dosya boyutu",
         "FirstLayerBedTemp": "İlk Katman Tabla Sıcaklığı",
         "FirstLayerExtTemp": "İlk Katman Ekstrüder Sıcaklığı",
         "FirstLayerHeight": "İlk Katman Yüksekliği",
@@ -324,7 +342,7 @@
         "HistoryPrinttimeAVG": "Baskılar",
         "JobDetails": "İş Detayları",
         "Jobs": "İşler",
-        "LastModified": "Son Modifiye Edilmiş",
+        "LastModified": "Son düzenleme",
         "LayerHeight": "Katman Yüksekliği",
         "LongestPrinttime": "En Uzun Baskı Süresi",
         "Note": "Not",
@@ -333,70 +351,79 @@
         "PrintHistory": "Baskı Geçmişi",
         "PrintTime": "Baskı Süresi",
         "PrinttimeAvg": "Baskı Süresi - Ø",
-        "Reprint": "Tekrar Yazdır",
-        "Save": "kaydet",
+        "Reprint": "Yeniden yazdır",
+        "Save": "kayıt et",
         "Search": "ara",
-        "SelectedFilamentUsed": "Kullanılan Seçilmiş Filament",
+        "SelectedFilamentUsed": "Seçilmiş Kullanılan Filament",
         "SelectedJobs": "Seçilmiş İşler",
-        "SelectedPrinttime": "Seçilmiş Baskı Süresi",
+        "SelectedPrinttime": "Seçilen Baskı Zamanı",
         "Slicer": "Dilimleyici",
-        "SlicerVersion": "Dilimleyici Versiyonu",
-        "StartTime": "Başlama Zamanı",
-        "Statistics": "İstatistikler",
+        "SlicerVersion": "Dilimleyici Sürümü",
+        "StartTime": "Başlama zamanı",
+        "Statistics": "Istatistik",
         "Status": "Durum",
         "StatusValues": {
             "cancelled": "İptal Edildi",
             "completed": "Tamamlandı",
             "error": "Hata",
             "in_progress": "Devam etmekte",
-            "klippy_disconnect": "Klippy bağlantıyı kes",
+            "klippy_disconnect": "Klippy bağlantısını kes",
             "klippy_shutdown": "Klippy kapat",
             "Others": "Diğerleri",
             "server_exit": "Sunucu çıkışı"
         },
+        "Table": "Tablo",
         "TitleExportHistory": "İhracat Geçmişi",
         "TitleRefreshHistory": "Geçmişi Yenile",
         "TitleSettings": "Ayarlar",
-        "TotalDuration": "Toplam Zaman",
-        "TotalFilamentUsed": "Toplam Filament Kullanımı",
+        "TotalDuration": "Toplam zaman",
+        "TotalFilamentUsed": "Kullanılan Toplam Filament",
         "TotalJobs": "Toplam İşler",
         "TotalPrinttime": "Toplam Baskı Süresi",
-        "TotalTime": "Toplam Süre"
+        "TotalTime": "Toplam zaman"
     },
     "JobQueue": {
-        "AllJobs": "Bütün İşler",
+        "AllJobs": "Tüm işler",
+        "Cancel": "İptal etmek",
+        "ChangeCount": "Sayıyı değiştir",
+        "Count": "Say",
         "Empty": "Boş",
-        "JobQueue": "İş Sırası",
+        "InvalidCountEmpty": "Giriş boş olmamalıdır!",
+        "InvalidCountGreaterZero": "Giriş 0'dan büyük olmalıdır!",
+        "JobQueue": "İş Kuyruğu",
         "Jobs": "İşler",
         "Pause": "Duraklat",
-        "RemoveFromQueue": "Sıradan Kaldır",
-        "Start": "Başlat"
+        "RemoveFromQueue": "Kuyruktan Kaldır",
+        "Start": "Başla"
     },
     "Machine": {
         "ConfigFilesPanel": {
             "AllFiles": "Hepsi",
-            "Cancel": "İptal",
+            "Cancel": "İptal Et",
             "ConfigFiles": "Yapılandırma Dosyaları",
             "ConfigRootDirectoryDoesntExists": "Yapılandırma dizini bulunamadı. Lütfen Moonraker yapılandırmasının [file_manager] bölümündeki \"config_path\" seçeneğini işaretleyin.",
             "Create": "Oluştur",
             "CreateDirectory": "Dizin Oluştur",
             "CreateFile": "Dosya Oluştur",
-            "CurrentPath": "Mevcut yol",
+            "CurrentPath": "Şuanki yol",
             "Delete": "Sil",
-            "DeleteDirectory": "Dizini Sil",
+            "DeleteDirectory": "Dizini sil",
             "DeleteDirectoryQuestion": "\"{name}\" dizini ve tüm içeriği silinsin mi?",
-            "DeleteSelectedQuestion": "{count} seçili öğe silinsin mi?",
+            "DeleteSelectedQuestion": "Seçilen {count} öğe silinsin mi?",
+            "DeleteSingleFileQuestion": "\"{name}\" dosyasını gerçekten silmek istiyor musunuz?",
             "Download": "İndir",
+            "Duplicate": "Çiftle",
+            "DuplicateFile": "Dosyayı Çiftle",
             "EditFile": "Dosyayı düzenle",
             "Empty": "Boş",
             "Files": "Dosyalar",
-            "Filesize": "Dosya Boyutu",
+            "Filesize": "Dosya boyutu",
             "Free": "Boş",
             "FreeDisk": "Boş disk",
-            "HiddenFiles": "Gizli dosyalar",
+            "HiddenFiles": "Gizlenmiş dosyalar",
             "HideBackupFiles": "Yedekleme dosyalarını gizle",
             "LastModified": "Son düzenleme",
-            "Name": "İsim",
+            "Name": "Isim",
             "RefreshDirectory": "Dizini Yenile",
             "Rename": "Yeniden Adlandır",
             "RenameDirectory": "Dizini Yeniden Adlandır",
@@ -405,119 +432,152 @@
             "SetupCurrentList": "Geçerli listeyi ayarla",
             "ShowFile": "Dosyayı göster",
             "Total": "Toplam",
-            "UploadFile": "Dosya yükleme",
-            "Uploading": "Yükleniyor",
+            "UploadFile": "Dosya Yükleme",
+            "Uploading": "Karşıya Yükleniyor",
             "Used": "Kullanılmış"
         },
         "EndstopPanel": {
             "Endstop": "Endstop",
-            "EndstopInfo": "Geçerli endstop durumunu yüklemek için sağ alttaki senkronizasyon düğmesine basın.",
+            "EndstopInfo": "Mevcut endstop durumunu yüklemek için sağ alttaki senkronizasyon düğmesine basın.",
             "Endstops": "Endstoplar",
             "open": "AÇIK",
             "TRIGGERED": "TETİKLENDİ"
         },
         "LogfilesPanel": {
-            "Logfiles": "Log dosyaları"
+            "Accept": "kabul et",
+            "Cancel": "iptal Et",
+            "Logfiles": "Log dosyaları",
+            "Rollover": "Logları Döndür",
+            "RolloverDescription": "Lütfen hangi logların sıfırlanması gerektiğini seçin:",
+            "RolloverToastFailed": "\"{name}\" için logu döndür: {message}",
+            "RolloverToastSuccessful": "\"{name}\" günlüğü başarıyla sıfırlandı."
         },
         "SystemPanel": {
             "Constants": "Sabitler",
-            "Cpu": "CPU",
-            "HostDetails": "Ana bilgisayar ayrıntıları",
+            "Cpu": "İşlemci",
+            "HostDetails": "Ana Makine ayrıntıları",
             "LastStats": "Son istatistikler",
             "Load": "Yük",
-            "Memory": "Hafıza",
-            "NoMoreInfos": "Daha Fazla Bilgi Yok",
+            "Memory": "MEM",
+            "NoMoreInfos": "Daha fazla bilgi yok",
             "SystemLoad": "Sistem Yükleri",
             "Values": {
                 "Awake": "Uyanık: {awake}",
-                "Bandwidth": "Bant Genişliği: {bandwidth}/s",
+                "Bandwidth": "Bant genişliği: {bandwidth}/sn",
                 "Distro": "Dağıtım: {name} {version_id}",
                 "Frequency": "Frekans: {frequency}",
                 "Load": "Yük: {load}",
                 "Memory": "Hafıza: {memory}",
-                "Os": "OS: {os}",
+                "Os": "İşletim Sistemi: {os}",
                 "Received": "Alındı: {received}",
                 "Temp": "Sıcaklık: {temp}°C",
-                "TempMax": "max: {temp}°C",
-                "TempMin": "min: {temp}°C",
+                "TempMax": "maks: {temp}°C",
+                "TempMin": "dak: {temp}°C",
                 "Transmitted": "İletildi: {transmitted}",
-                "Version": "Versiyon: {version}"
+                "Version": "Sürüm: {version}"
             }
         },
         "UpdatePanel": {
-            "CheckForUpdates": "Güncellemeleri kontrol et",
-            "Commits": "Taahhütler",
-            "CommitsAvailable": "taahhüt yok | {count} taahhüt mevcut | {count} taahhütler mevcut",
-            "CommitsOnDate": "{date} tarihinde taahhütler",
-            "CommittedDaysAgo": "{days} gün önce taahhüt edildi",
-            "CommittedHoursAgo": "{hours} saat önce taahhüt edildi",
-            "CommittedOnDate": "{date} tarihinde taahhüt edildi",
-            "CommittedYesterday": "dün taahhüt edildi",
+            "Abort": "İptal Et",
+            "AreYouSure": "Emin misiniz?",
+            "CheckForUpdates": "Güncellemeleri Kontrol Et",
+            "Close": "Kapat",
+            "CommitHistory": "Commit Geçmişi",
+            "Commits": "Commit'ler",
+            "CommitsAvailable": "hiçbir commit mevcut | {count} commit mevcut | {count} commit mevcut",
+            "CommitsOnDate": "{date} tarihindeki Commit'ler",
+            "CommittedDaysAgo": "{days} gün önce commit edildi",
+            "CommittedHoursAgo": "{hours} saat önce commit edildi",
+            "CommittedOnDate": "{date} tarihinde commit edildi",
+            "CommittedYesterday": "dün commit edildi",
+            "ConfigChanges": "Konfigürasyon Değişiklikleri",
+            "CountPackagesCanBeUpgraded": "{count} paket güncellenebilir",
             "Detached": "ayrılmış",
             "Dirty": "kirli",
-            "ERROR": "HATA",
+            "GenericUpdateQuestion": "Bu güncelleme için herhangi bir manuel düzenleme gerekip gerekmediğini görmek için commit geçmişini (varsa) ve bu proje için GitHub sayfasını kontrol edin.",
+            "GitHubPage": "GitHub Sayfası",
+            "HardRecovery": "Sert Kurtarma",
+            "InitUpdateManager": "Güncelleme Yöneticisi henüz başlatılmamış. Sistemi ilk kez başlattığınızda bu normaldir. Tüm bileşenleri başlatmak için lütfen yenileme düğmesine tıklayın.",
             "Invalid": "geçersiz",
-            "OSPackages": "OS-Paketleri",
-            "PackagesCanBeUpgraded": "paketler yükseltilebilir",
+            "IUnderstandTheRisks": "Riskleri anlıyorum",
+            "LinkToGithub": "GitHub Bağlantısı",
+            "KlipperUpdateQuestionFirmware": "Bu, Klipper ana yazılımını güncelleyecek. Klipper firmware'i çalıştıran kontrol kartları, makineyi tekrar kullanıma sokmadan önce derlenmiş firmware ile yeniden yazılması gerekebilir.",
+            "KlipperUpdateQuestionConfig": "Bu güncelleme, config parametrelerinde değişiklikler içerebilir ve bu değişiklikleri printer.cfg dosyasında düzenlemeniz gerekebilir. Detaylar için değişiklik günlüğüne bakın.",
+            "MoonrakerUpdateQuestion": "Bu, Moonraker API'sini güncelleyecek. Makineyi kullanmaya devam etmek için moonraker.conf dosyasında değişiklikler yapmanız gerekebilir.",
+            "MoreCommitsInfo": "Burada maksimum 30 commit gösterilebilir. Tüm commit'leri görmek için lütfen aşağıdaki bağlantıya tıklayın:",
+            "Notification": {
+                "Detached": "Ayrık durumu bir hata değildir ve bir sorun da değildir. Sadece yerel depoda uzak depoda olmayan ek commit'lerin bulunduğu anlamına gelir.",
+                "Dirty": "Yerel depo değiştirilmiş ve bu durumda güncellenemez. Lütfen bu depoyu kurtarın."
+            },
+            "OSPackages": "İşletim Sistemi Paketleri",
+            "SoftRecovery": "Yumuşak Kurtarma",
+            "StartUpdate": "Güncellemeyi Başlat",
             "System": "Sistem",
+            "ThesePackagesCanBeUpgrade": "Bu sistem paketleri güncellenebilir:",
             "Unknown": "bilinmeyen",
-            "Update": "güncelle",
-            "UpdateAll": "Tüm bileşenleri güncelle",
+            "Update": "güncelleme",
+            "UpdateAll": "Tüm Bileşenleri Güncelle",
             "UpdateManager": "Güncelleme Yöneticisi",
-            "Upgrade": "yükselt",
-            "UpToDate": "güncel"
+            "UpdateWarning": "Güncelleme Uyarısı: {name}",
+            "Upgrade": "yükseltme",
+            "UpgradeableSystemPackages": "Yükseltilebilir Sistem Paketleri",
+            "UpToDate": "güncel",
+            "WebClientUpdateQuestion": "Web istemciyi güncelleme, uyumsuzluklara neden olabilecek değişiklikler içerebilir. Daha fazla bilgi için sürüm notlarına bakın."
         }
     },
     "ManualProbe": {
-        "Abort": "iptal et",
+        "Abort": "iptal",
         "Accept": "kabul et",
         "Advanced": "Gelişmiş",
         "Headline": "Manuel Prob"
     },
     "Panels": {
         "ExtruderControlPanel": {
-            "Allowed": "İzin Verilmiş",
-            "EstimatedExtrusion": "Tahmini Ekstrüzyon:",
-            "Extrude": "Ekstrüde et",
-            "ExtruderTempTooLow": "Ekstrüder sıcaklığı <",
-            "ExtrusionFactor": "Ekstrüzyon faktörü",
+            "Allowed": "İzin Verildi",
+            "EstimatedExtrusion": "Ekstrüzyon:",
+            "Extrude": "Ekstrüzyon",
+            "ExtruderTempTooLow": "Ekstruder sıc. <",
+            "ExtrusionFactor": "Ekstrüzyon Faktörü",
             "ExtrusionFeedrate": "Ekstrüzyon Besleme Hızı",
             "FilamentLength": "Filament Uzunluğu",
             "FirmwareRetractionSettings": {
-                "RetractLength": "Geri Çekme Mesafesi",
+                "RetractLength": "Geri Çekme Uzunluğu",
                 "RetractSpeed": "Geri Çekme Hızı",
-                "UnretractExtraLength": "Geri Çekilmemiş Ekstra Uzunluk",
-                "UnretractSpeed": "Geri Verme Hızı"
+                "UnretractExtraLength": "Geri Çekme Sonrası Ekstra Uzunluk",
+                "UnretractSpeed": "Geri Çekme Sonrası Hız"
             },
-            "Headline": "Ekstrüder",
+            "Headline": "Ekstruder",
             "LoadFilament": "Filament Yükle",
             "PressureAdvanceSettings": {
-                "Advance": "Basınç Avansı",
-                "Extruder": "Ekstrüder",
-                "SmoothTime": "Yumuşatma Zamanı"
+                "Advance": "Basınç Artışı",
+                "Extruder": "Ekstruder",
+                "SmoothTime": "Pürüzsüzleştirme Süresi"
             },
-            "Requested": "Talep Edilen",
+            "Requested": "Talep Edildi",
             "Retract": "Geri Çekme",
-            "TooLargeExtrusion": "Ekstrüzyon çok fazla!",
-            "UnloadFilament": "Filament Çıkar"
+            "TooLargeExtrusion": "Ekstrüzyon çok büyük!",
+            "UnloadFilament": "Filamenti Boşalt"
         },
         "FarmPrinterPanel": {
-            "ReconnectToPrinter": "Yeniden Bağlan",
+            "ReconnectToPrinter": "Yazıcıya Yeniden Bağlan",
             "SwitchToPrinter": "Yazıcıya Geç",
             "WebcamOff": "Kapalı"
         },
         "KlippyStatePanel": {
-            "FirmwareRestart": "Firmware Yeniden Başlatma",
-            "KlipperCheck": "Lütfen Klipper hizmetinin çalışıp çalışmadığını ve bir UDS'nin (Unix Etki Alanı Soketi) yapılandırılıp yapılandırılmadığını kontrol edin.",
-            "MoonrakerCannotConnect": "Moonraker Klipper'a bağlanamıyor!",
+            "CheckKlippyAndUdsAddress": "Lütfen Klipper hizmetinin çalıştığını ve moonraker.conf dosyasında klippy_uds_address'in doğru şekilde yapılandırıldığını kontrol edin.",
+            "FirmwareRestart": "Firmware Yeniden Başlat",
+            "MoonrakerCannotConnect": "Moonraker, Klipper'a bağlanamıyor!",
+            "PowerOn": "Gücü Aç",
+            "PrinterSwitchedOff": "Yazıcı kapalı",
+            "PrinterSwitchedOffDescription": "Yazıcı şu anda kapalı ve Klipper bağlanamıyor. Yazıcıyı açmak için aşağıdaki düğmeye tıklayın:",
             "Restart": "Yeniden Başlat",
             "ServiceReports": "{service} raporları"
         },
         "MachineSettingsPanel": {
             "Headline": "Makine",
             "MotionSettings": {
-                "Acceleration": "İvme",
-                "MaxAccelToDecel": "Yavaşlamaya Maksimum Hızlanma",
+                "Acceleration": "Ivme",
+                "MaxAccelToDecel": "Maks. Ivmeleme Süresi",
                 "SquareCornerVelocity": "Kare Köşe Hızı",
                 "Velocity": "Hız"
             }
@@ -528,15 +588,15 @@
         },
         "MiniconsolePanel": {
             "Headline": "Konsol",
-            "HideTemperatures": "Sıcaklıkları gizle",
-            "HideTimelapse": "Timelapse'i gizle",
-            "SendCode": "Kod gönder...",
+            "HideTemperatures": "Sıcaklıkları Gizle",
+            "HideTimelapse": "Timelapse'ı Gizle",
+            "SendCode": "Kod Gönder...",
             "SetupConsole": "Konsolu Ayarla"
         },
         "MinSettingsPanel": {
-            "IncludeMainsailCfg": "mainsail.cfg dosyasını printer.cfg dosyanıza eklediğinizden emin olun.",
-            "IsNotDefinedInConfig": "config içinde tanımlı değil.",
-            "MissingConfiguration": "Eksik yapılandırma",
+            "IncludeMainsailCfg": "Lütfen printer.cfg dosyanızda mainsail.cfg dosyasını eklediğinizden emin olun.",
+            "IsNotDefinedInConfig": "config dosyasında tanımlı değil.",
+            "MissingConfiguration": "Eksik konfigürasyon",
             "MoreInformation": "daha fazla bilgi"
         },
         "MiscellaneousPanel": {
@@ -549,30 +609,30 @@
             },
             "RunoutSensor": {
                 "Detected": "algılandı",
-                "Disabled": "hizmet dışı kalmış",
+                "Disabled": "devre dışı",
                 "Empty": "Boş"
             }
         },
         "PowerControlPanel": {
             "Error": "Hata",
-            "Off": "Kapalı",
-            "On": "Açık",
+            "Off": "Kapat",
+            "On": "Aç",
             "PowerControl": "Güç Kontrolü"
         },
         "StatusPanel": {
-            "CancelPrint": "Baskıyı iptal et",
-            "ClearPrintStats": "Baskı istatistiklerini temizle",
+            "CancelPrint": "Baskıyı İptal Et",
+            "ClearPrintStats": "Baskı İstatistiklerini Temizle",
             "Difference": "Fark",
-            "EmptyGcodes": "G Kodu yok.",
+            "EmptyGcodes": "Hiçbir G-Kodu yok.",
             "EmptyJobqueue": "Şu anda iş kuyruğunda dosya yok.",
-            "Estimate": "Tahmini",
-            "ETA": "TVS",
+            "Estimate": "Tahmin",
+            "ETA": "Tahmini Bitiş Zamanı",
             "ExcludeObject": {
-                "Cancel": "iptal",
-                "Excluded": "Hariç Tutulmuş",
+                "Cancel": "iptal et",
+                "Excluded": "Hariç Tutuldu",
                 "ExcludeObject": "Nesneyi Hariç Tut",
                 "ExcludeObjectHeadline": "Nesneyi Hariç Tut",
-                "ExcludeObjectText": "\"{name}\" öğesini gerçekten hariç tutmak istiyor musunuz?"
+                "ExcludeObjectText": "\"{name}\" nesnesini gerçekten hariç tutmak istiyor musunuz?"
             },
             "Filament": "Filament",
             "File": "Dosya",
@@ -580,79 +640,91 @@
             "Flow": "Akış",
             "Headline": "Durum",
             "Jobqueue": "İş Kuyruğu ({count})",
-            "JobqueueMoreFiles": "artık iş yok | bir iş daha | {count} iş daha",
+            "JobqueueMoreFiles": "daha fazla iş yok | bir iş daha var | {count} iş daha var",
             "Layer": "Katman",
-            "Max": "max",
+            "Max": "maks.",
             "ObjectHeight": "Nesne Yüksekliği",
-            "PausePrint": "Baskıyı duraklat",
-            "Print": "Yazdır",
+            "PauseAtLayer": {
+                "Abort": "iptal et",
+                "Accept": "kabul et",
+                "AtLayer": "katmanda",
+                "Call": "Ara",
+                "DescriptionPauseAtLayerActive": "Bu işlev zaten aktif ve {layer} katmanında \"{call}\" komutunu çağıracaktır. Komutu tekrar çağırırsanız, bu ayarlar üzerine yazılır.",
+                "DescriptionPauseNextLayerActive": "Bu işlev zaten aktif ve bir sonraki katmanda \"{call}\" komutunu çağıracaktır.",
+                "Layer": "Katman",
+                "NextLayer": "bir sonraki katman",
+                "PauseAtLayer": "Katmanda Duraklat",
+                "Type": "Tür"
+            },
+            "PausePrint": "Baskıyı Duraklat",
+            "Print": "Baskı",
             "PrintTime": "Baskı Süresi",
-            "ReprintJob": "İşi yeniden yazdır",
-            "Requested": "Talep edilen",
-            "ResumePrint": "Baskıyı devam ettir",
-            "Slicer": "Dilimleyici",
+            "ReprintJob": "İşi Tekrarla",
+            "Requested": "Talep Edildi",
+            "ResumePrint": "Baskıya Devam Et",
+            "Slicer": "Dilleyici",
             "Speed": "Hız",
             "Status": "Durum",
-            "Total": "Toplam",
+            "Total": "toplam",
             "Unknown": "Bilinmeyen"
         },
         "TemperaturePanel": {
-            "AutoscaleChart": "Tabloyu Otomatik Ölçeklendir",
-            "Avg": "Avg",
+            "AutoscaleChart": "Grafikleri Otomatik Ölçekle",
+            "Avg": "Ort",
             "Cooldown": "Soğutma",
-            "Current": "Anlık",
+            "Current": "Mevcut",
             "Dataset": {
-                "Power": "PWM-gücü",
-                "Speed": "PWM-hızı",
+                "Power": "PWM-güç",
+                "Speed": "PWM-hız",
                 "Target": "hedef sıcaklık",
-                "Temperature": "şuanki sıcaklık"
+                "Temperature": "mevcut sıcaklık"
             },
             "Headline": "Sıcaklıklar",
-            "Max": "max",
-            "Min": "min",
-            "Name": "İsim",
-            "Presets": "Ön ayarlar",
+            "Max": "maks.",
+            "Min": "min.",
+            "Name": "Ad",
+            "Presets": "Önayarlar",
             "SetupTemperatures": "Sıcaklıkları Ayarla",
             "ShowChart": "Grafiği Göster",
-            "ShowNameInChart": "{name}'yi grafikte göster",
-            "ShowNameInList": "{name}'yi listede göster",
+            "ShowNameInChart": "{name}'i grafiğe ekle",
+            "ShowNameInList": "{name}'i listede göster",
             "State": "Durum",
             "Target": "Hedef",
             "TemperaturesInChart": "Sıcaklık [°C]",
-            "TempTooHigh": "{name} için sıcaklık çok yüksek! (max: {max})",
-            "TempTooLow": "{name} için sıcaklık çok düşük! (max: {max})"
+            "TempTooHigh": "{name} için sıcaklık çok yüksek! (maks: {max})",
+            "TempTooLow": "{name} için sıcaklık çok düşük! (min: {min})"
         },
         "ToolheadControlPanel": {
             "Absolute": "mutlak",
-            "ALL": "HEPSİ",
+            "ALL": "TÜMÜ",
             "Headline": "Araç Başlığı",
             "PleaseConfigureSteps": "Lütfen adımları yapılandırın",
-            "Position": "Pozisyon",
+            "Position": "Konum",
             "QGL": "QGL",
             "Relative": "göreceli",
             "SettingsInterfaceControl": "Ayarlar > Arayüz > Kontrol",
             "SpeedFactor": "Hız faktörü",
-            "ZTilt": "Z-Eğim"
+            "ZTilt": "Z-Eğimi"
         },
         "WebcamPanel": {
-            "All": "Hepsi",
+            "All": "Tümü",
             "FPS": "FPS",
             "Headline": "Web Kamerası",
-            "NoWebcam": "Web kamerası yok. \"Arayüz Ayarları\" -> \"Web Kameraları\" altında bir web kamerası ekleyin.",
+            "NoWebcam": "Kullanılabilir bir web kamerası yok. \"Arayüz Ayarları\" -> \"Web Kameraları\" altından bir web kamerası ekleyin.",
             "UnknownWebcamService": "Bilinmeyen Web Kamerası Hizmeti"
         },
         "ZoffsetPanel": {
             "Clear": "Temizle",
-            "Headline": "Z-Ofset",
-            "Later": "Sonra",
-            "Ok": "OK",
+            "Headline": "Z-Offset",
+            "Later": "Daha sonra",
+            "Ok": "Tamam",
             "Save": "Kaydet",
-            "SaveConfig": "YAPILANDIRMAYI KAYDET",
-            "SaveInfoDescription": "Yeni Z-Ofseti hesaplandı ve kaydedildi. Printer.cfg'ye kaydetmek için \"YAPILANDIRMAYI KAYDET\"'in üzerine tıklayın ve Klipper'ı yeniden başlatın.",
-            "SaveInfoDescriptionPrint": "Yeni Z-Ofseti hesaplandı ve kaydedildi. Yazdırdıktan sonra, yazıcı.cfg'ye kaydetmek için üst çubuktaki \"YAPILANDIRMAYI KAYDET\"'in üzerine tıklayın ve Klipper'ı yeniden başlatın.",
+            "SaveConfig": "KONFIGÜRASYONU KAYDET",
+            "SaveInfoDescription": "Yeni Z-Offset hesaplandı ve kaydedildi. printer.cfg dosyasına kaydetmek ve Klipper'ı yeniden başlatmak için üst çubuktaki \"KONFIGÜRASYONU KAYDET\" düğmesine tıklayın.",
+            "SaveInfoDescriptionPrint": "Yeni Z-Offset hesaplandı ve kaydedildi. Baskıdan sonra, printer.cfg dosyasına kaydetmek ve Klipper'ı yeniden başlatmak için üst çubuktaki \"KONFIGÜRASYONU KAYDET\" düğmesine tıklayın.",
             "SaveInfoHeadline": "Bilgi",
-            "ToEndstop": "Endstop'a",
-            "ToProbe": "Prob'a"
+            "ToEndstop": "endstope kadar",
+            "ToProbe": "proba kadar"
         }
     },
     "PowerDeviceChangeDialog": {
@@ -664,7 +736,7 @@
     },
     "Router": {
         "Console": "Konsol",
-        "Dashboard": "Gösterge Paneli",
+        "Dashboard": "Kontrol Paneli",
         "G-Code Files": "G-Kod Dosyaları",
         "G-Code Viewer": "G-Kod Görüntüleyici",
         "Heightmap": "Yükseklik Haritası",
@@ -676,78 +748,78 @@
     },
     "SelectPrinterDialog": {
         "AddPrinter": "Yazıcı Ekle",
-        "AddPrintersToJson": "Lütfen Yazıcıları config.json'a ekleyin.",
-        "CannotConnectTo": "{host}'a bağlanılamıyor.",
+        "AddPrintersToJson": "Lütfen yazıcıları config.json'a ekleyin.",
+        "CannotConnectTo": "{host} ile bağlantı kurulamıyor.",
         "ChangePrinter": "Yazıcıyı Değiştir",
-        "Connecting": "{host}'a bağlanılıyor",
+        "Connecting": "{host} ile bağlantı kuruluyor",
         "ConnectionFailed": "Bağlantı başarısız",
         "EditPrinter": "Yazıcıyı Düzenle",
-        "Hello": "Merhaba, Mainsail'in uzak moduna hoş geldiniz!",
-        "HostnameInvalid": "geçersiz Ana Bilgisayar Adı/IP",
-        "HostnameIp": "Ana Bilgisayar Adı/IP",
-        "HostnameRequired": "Ana bilgisayar adı gerekli",
+        "Hello": "Merhaba ve Mainsail'in uzaktan moduna hoş geldiniz!",
+        "HostnameInvalid": "geçersiz Hostname/IP",
+        "HostnameIp": "Hostname/IP",
+        "HostnameRequired": "Hostname gerekli",
         "Port": "Port",
         "PortRequired": "Port gerekli",
-        "RememberToAdd": "Lütfen moonraker.conf'da 'cors_domains' içine '{cors}' eklemeyi unutmayın.",
+        "RememberToAdd": "Lütfen moonraker.conf içinde 'cors_domains' içine '{cors}' eklediğinizden emin olun.",
         "SelectPrinter": "Yazıcı Seç",
-        "TryAgain": "tekrar deneyin",
+        "TryAgain": "tekrar dene",
         "UpdatePrinter": "Yazıcıyı Güncelle",
-        "YouCanFindMore": "Daha fazla ayrıntıyı şurada bulabilirsiniz."
+        "YouCanFindMore": "Daha fazla ayrıntı için şu adreste bulabilirsiniz"
     },
     "Settings": {
-        "Cancel": "İptal Et",
+        "Cancel": "İptal",
         "Close": "Kapat",
         "ConsoleTab": {
             "AddFilter": "filtre ekle",
             "Console": "Konsol",
             "CreateHeadline": "Filtre oluştur",
             "Direction": "Yön",
-            "DirectionShell": "En alttaki son giriş",
-            "DirectionTable": "En üstteki son giriş",
+            "DirectionShell": "En son girdi en altta",
+            "DirectionTable": "En son girdi en üstte",
             "EditHeadline": "Filtreyi düzenle",
-            "EntryStyle": "Giriş-Tasarım",
+            "EntryStyle": "Girdi-Tasarımı",
             "EntryStyleCompact": "kompakt",
             "EntryStyleDefault": "varsayılan",
             "Filters": "Filtreler",
             "Height": "Yükseklik",
             "HideTemperatures": "Sıcaklıkları gizle",
-            "HideTimelapse": "Timelapse'i gizle",
-            "Name": "İsim",
-            "Regex": "Regex",
-            "StoreButton": "Filtreyi kaydet",
-            "UpdateButton": "Filtreyi güncelle"
+            "HideTimelapse": "Zaman Atlamayı Gizle",
+            "Name": "Ad",
+            "Regex": "Düzenli ifade",
+            "StoreButton": "Filtreyi Kaydet",
+            "UpdateButton": "Filtreyi Güncelle"
         },
         "ControlTab": {
-            "Bars": "Barlar",
+            "Bars": "Çubuklar",
             "Circle": "Daire",
             "Control": "Kontrol",
-            "Cross": "Çapraz",
-            "EnableXYHoming": "Birleşik X ve Y eksenlerinin home'lanmasını etkinleştirin",
-            "EstimatedExtrusionInfo": "Tahmini ekstrüzyon bilgilerini göster",
-            "EstimatedExtrusionInfoDescription": "Ekstrüzyon miktarına ve ilerleme hızına göre tahmini ekstrüzyonlar için bilgileri göster / gizle",
-            "InvertXMovement": "X ekseni hareket yönünü ters çevir",
-            "InvertYMovement": "Y ekseni hareket yönünü ters çevir",
-            "InvertZMovement": "Z ekseni hareket yönünü ters çevir",
+            "Cross": "Çarpı",
+            "EnableXYHoming": "Birleşik X ve Y eksenlerini etkinleştir",
+            "EstimatedExtrusionInfo": "Tahmini ekstrüzyon bilgisini göster",
+            "EstimatedExtrusionInfoDescription": "Ekstrüzyon miktarı ve besleme hızına dayalı tahmini ekstrüzyon bilgisini göster / gizle",
+            "InvertXMovement": "X eksen hareket yönünü tersine çevir",
+            "InvertYMovement": "Y eksen hareket yönünü tersine çevir",
+            "InvertZMovement": "Z eksen hareket yönünü tersine çevir",
             "IsDefault": " (varsayılan)",
             "MaximumValues": "Maksimum değerler: {maximum}",
-            "MaximumValuesVisibility": "En iyi görünürlük için maksimum {maximum} değer önerilir",
+            "MaximumValuesVisibility": "En iyi görünürlük için {maximum} değerinin maksimumu tavsiye edilir",
             "MinimumValues": "Minimum değerler: {minimum}",
             "MotorsOff": "Motorlar kapalı{isDefault}",
-            "MoveDistancesEInMm": "Ekstrüzyon miktarı ön ayarları (mm olarak)",
-            "MoveDistancesInMm": "Hareket mesafesi artışları (mm cinsinden)",
-            "MoveDistancesXYInMm": "X ve Y eksenlerinin hareket mesafesi artışları (mm cinsinden)",
-            "MoveDistancesZInMm": "Z ekseninde hareket mesafesi artışları (mm cinsinden)",
-            "QuadGantryLevel": "Dörtlü Portal Seviyesi{isDefault}",
-            "SpeedEInMms": "Ekstrüzyon hızı ön ayarları (mm/sn)",
-            "SpeedXY": "X ve Y eksenleri hareket hızı",
-            "SpeedZ": "Z ekseni hareket hızı",
+            "MoveDistancesEInMm": "Ekstrüzyon miktarı varsayılanları (mm cinsinden)",
+            "MoveDistancesInMm": "Taşıma mesafesi artışları (mm cinsinden)",
+            "MoveDistancesXYInMm": "X ve Y eksenleri taşıma mesafesi artışları (mm cinsinden)",
+            "MoveDistancesZInMm": "Z eksen taşıma mesafesi artışları (mm cinsinden)",
+            "QuadGantryLevel": "Dört İstifleme Seviyesi{isDefault}",
+            "SpeedEInMms": "Ekstrüzyon hızı varsayılanları (mm/s cinsinden)",
+            "SpeedXY": "Hareket hızı X ve Y eksenleri",
+            "SpeedZ": "Hareket hızı Z ekseni",
             "Style": "Stil",
-            "ValueGreaterThan": "Değer, {value} değerinden büyük olmalıdır",
-            "ZOffsetIncrements": "Z-Ofset artışları (mm olarak)",
+            "ValueGreaterThan": "Değer {value}'dan büyük olmalıdır",
+            "ZOffsetIncrements": "Z-Ofset artışları (mm cinsinden)",
             "ZTiltAdjust": "Z-Eğim Ayarı{isDefault}"
         },
         "DashboardTab": {
-            "Dashboard": "Gösterge Paneli",
+            "Dashboard": "Kontrol Paneli",
             "Desktop": "Masaüstü",
             "Mobile": "Mobil",
             "ResetLayout": "Düzeni Sıfırla",
@@ -756,19 +828,20 @@
         },
         "Edit": "Düzenle",
         "EditorTab": {
-            "ConfirmUnsavedChanges": "Kaydedilmemiş değişiklikleri kaydetme veya silme istemi",
-            "ConfirmUnsavedChangesDescription": "Etkinleştirilirse, düzenleyici, yapılan değişiklikleri kaydetmek veya atmak için bir onay ister. Devre dışı bırakılırsa, değişiklikler sessizce atılır.",
+            "ConfirmUnsavedChanges": "Kaydedilmemiş değişiklikleri kaydet veya iptal et için uyarı ver",
+            "ConfirmUnsavedChangesDescription": "Etkinleştirilirse, editör yapılan değişiklikleri kaydetmek veya iptal etmek için onay gerektirir. Devre dışı bırakılırsa değişiklikler sessizce iptal edilir.",
             "Editor": "Editör",
             "KlipperRestartMethod": "Klipper yeniden başlatma yöntemi",
-            "KlipperRestartMethodDescription": "Klipper yapılandırma dosyalarını düzenlerken 'Kaydet ve Yeniden Başlat'ta hangi yeniden başlatma yönteminin kullanılacağını seçin.",
-            "MoonrakerRestartInstance": "Moonraker yeniden başlatma örneği",
-            "MoonrakerRestartInstanceDescription": "Moonraker yapılandırma dosyalarını düzenlerken 'Kaydet ve Yeniden Başlat'ta hangi Moonraker hizmetinin yeniden başlatılacağını seçin.",
-            "UseEscToClose": "Düzenleyiciyi kapatmak için ESC'yi kullanın",
-            "UseEscToCloseDescription": "ESC tuşunun düzenleyiciyi kapatmasına izin verir"
+            "KlipperRestartMethodDescription": "Klipper yapılandırma dosyalarını düzenlerken 'Kaydet ve Yeniden Başlat' seçildiğinde hangi yeniden başlatma yönteminin kullanılacağını seçin.",
+            "UseEscToClose": "Editörü kapatmak için ESC tuşunu kullan",
+            "UseEscToCloseDescription": "ESC tuşunun editörü kapatmasına izin verir",
+            "TabSize": "TAB Boyutu",
+            "TabSizeDescription": "TAB için kaç boşluk kullanılacağını ayarlar",
+            "Spaces": "Boşluklar: {count}"
         },
         "GCodeViewerTab": {
             "BackgroundColor": "Arka Plan Rengi",
-            "ExtruderColor": "Ekstrüder Renkleri",
+            "ExtruderColor": "Ekstruder Renkleri",
             "GCodeViewer": "G-Kod Görüntüleyici",
             "GridColor": "Izgara Rengi",
             "MaxFeed": "Maksimum Besleme Hızı",
@@ -777,77 +850,76 @@
             "ShowAxes": "Eksenleri Göster"
         },
         "GeneralTab": {
-            "12hours": "12 saat ({time})",
-            "24hours": "24 saat ({time})",
-            "Backup": "Yedek",
+            "12hours": "12-saat ({time})",
+            "24hours": "24-saat ({time})",
+            "Backup": "Yedekleme",
             "BackupDialog": "Lütfen yedek oluşturmak istediğiniz tüm bölümleri seçin:",
-            "CalcEstimateTime": "Tahmini zaman hesaplaması",
-            "CalcEstimateTimeDescription": "Birden fazla seçilirse, bir ortalama hesaplanır",
-            "CalcEtaTime": "TVS(Tahmini Varış Süresi) hesaplaması",
-            "CalcEtaTimeDescription": "Birden fazla seçilirse, bir ortalama hesaplanır",
-            "CalcPrintProgress": "Yazdırma ilerleme hesaplaması",
-            "CalcPrintProgressDescription": "Yazdırma ilerlemesini hesaplama yöntemi.",
+            "CalcEstimateTime": "Tahmini süre hesaplama",
+            "CalcEstimateTimeDescription": "Birden fazla seçilirse ortalama hesaplanır",
+            "CalcEtaTime": "ETA hesaplama",
+            "CalcEtaTimeDescription": "Birden fazla seçilirse ortalama hesaplanır",
+            "CalcPrintProgress": "Baskı ilerleme hesaplama",
+            "CalcPrintProgressDescription": "Baskı ilerlemesini hesaplama yöntemi.",
             "CalcPrintProgressItems": {
                 "Filament": "Filament",
                 "FileAbsolute": "Dosya konumu (mutlak)",
                 "FileRelative": "Dosya konumu (göreceli)",
                 "Slicer": "Dilimleyici (M73)"
             },
-            "CannotReadJson": "Yedekleme dosyası okunamıyor/ayrıştırılamıyor.",
-            "DateFormat": "Tarih formatı",
+            "CannotReadJson": "Yedekleme dosyası okunamıyor / ayrıştırılamıyor.",
+            "DateFormat": "Tarih Biçimi",
             "DbConsoleHistory": "Konsol Geçmişi",
             "DbHistoryJobs": "Geçmiş İşler",
-            "DbHistoryTotals": "Geçmiş Toplamları",
-            "DbTimelapseSettings": "Timelapse Ayarları",
-            "DbView": "Görüntüleme Ayarları",
-            "DbWebcams": "Web Kameraları",
+            "DbHistoryTotals": "Geçmiş Toplamlar",
+            "DbTimelapseSettings": "Zaman Atlama Ayarları",
+            "DbView": "Görünüm Ayarları",
             "EstimateValues": {
                 "Filament": "Filament",
                 "File": "Dosya",
                 "Slicer": "Dilimleyici"
             },
             "FactoryDialog": "Lütfen sıfırlamak istediğiniz tüm bölümleri seçin:",
-            "FactoryReset": "Fabrika ayarları",
+            "FactoryReset": "Fabrika ayarlarına sıfırla",
             "General": "Genel",
             "Language": "Dil",
-            "MoonrakerDb": "Moonraker DB",
-            "PrinterName": "Yazıcı İsmi",
+            "MainsailSettingsMoonrakerDb": "Moonraker DB'deki Mainsail Ayarları",
+            "PrinterName": "Yazıcı Adı",
             "Reset": "sıfırla",
-            "Restore": "Eski haline getir",
+            "Restore": "Geri Yükle",
             "RestoreDialog": "Lütfen geri yüklemek istediğiniz tüm bölümleri seçin:",
-            "TimeFormat": "Tarih formatı"
+            "TimeFormat": "Saat Biçimi"
         },
         "InterfaceSettings": "Arayüz Ayarları",
         "MacrosTab": {
             "Add": "ekle",
-            "AddGroup": "Grup ekle",
+            "AddGroup": "Grup Ekle",
             "AvailableMacros": "Kullanılabilir Makrolar",
-            "ChangeMacroColor": "Düğmenin rengini değiştirin.",
+            "ChangeMacroColor": "Düğmenin rengini değiştir.",
             "Color": "Renk",
-            "CountMacros": "makro eklenmedi | {count} Makro | {count} Makro",
+            "CountMacros": "Makro eklenmedi | {count} Makro | {count} Makrolar",
             "Custom": "özel",
             "CustomColor": "Özel Renk",
             "DeletedMacro": "Silinen makro",
-            "DeleteMacroFromGroup": "Gruptan makroyu silin.",
+            "DeleteMacroFromGroup": "Makroyu gruptan sil.",
             "EditGroup": "Grubu Düzenle",
             "Error": "hata",
             "Expert": "Uzman",
             "General": "Genel",
             "Group": "Grup",
-            "GroupMacros": "Makroları Grupla",
+            "GroupMacros": "Grup Makroları",
             "Macrogroups": "Gruplar",
             "Macros": "Makrolar",
             "Management": "Yönetim",
-            "Name": "İsim",
-            "NoAvailableMacros": "Kullanılabilir makro yok.",
+            "Name": "Ad",
+            "NoAvailableMacros": "Mevcut makro yok.",
             "NoGroups": "Grup bulunamadı...",
             "NOMacros": "Makro bulunamadı...",
             "NoMacrosInGroup": "Bu grupta makro yok.",
             "Primary": "birincil",
             "Secondary": "ikincil",
-            "ShowInStatePaused": "Yazıcı duraklatıldıysa göster/gizle.",
-            "ShowInStatePrinting": "Yazıcı yazdırıyorsa göster/gizle.",
-            "ShowInStateStandby": "Yazıcı beklemedeyse göster/gizle.",
+            "ShowInStatePaused": "Yazıcı duraklatıldığında göster/gizle.",
+            "ShowInStatePrinting": "Yazıcı baskı yaptığında göster/gizle.",
+            "ShowInStateStandby": "Yazıcı beklemedeyken göster/gizle.",
             "Simple": "Basit",
             "Status": "Durum",
             "Success": "başarı",
@@ -858,42 +930,45 @@
             "AddGroup": "grup ekle",
             "AddPreset": "ön ayar ekle",
             "Color": "Renk",
-            "CreateGroup": "Grup oluştur",
-            "CreatePreset": "Hazır ayar oluştur",
+            "CreateGroup": "Grup Oluştur",
+            "CreatePreset": "Ön Ayar Oluştur",
             "End": "Son",
             "EndDescription": "Bu grubun son LED'i.",
             "Groups": "Gruplar",
-            "GroupSubTitle": "Başlangıç: {start}, Bitiş: {end}",
+            "GroupSubTitle": "Başlangıç: {start}, Son: {end}",
             "LightGroups": "{name} - Gruplar",
             "LightPresets": "{name} - Ön Ayarlar",
             "Miscellaneous": "Çeşitli",
-            "Name": "İsim",
-            "NoDevicesFound": "Hiçbir cihaz bulunamadı",
+            "Name": "Ad",
+            "NoDevicesFound": "Cihaz bulunamadı",
             "NoGroupFound": "Grup bulunamadı",
             "NoPresetFound": "Ön ayar bulunamadı",
             "Presets": "Ön Ayarlar",
-            "Start": "Başlat",
+            "Start": "Başla",
             "StartDescription": "Bu grubun ilk LED'i.",
             "UnableToLoadLight": "Işık yüklenemiyor",
             "UnableToLoadPreset": "Ön ayar yüklenemiyor"
         },
+        "NavigationTab": {
+            "Navigation": "Navigasyon"
+        },
         "PresetsTab": {
             "AddPreset": "ön ayar ekle",
-            "Cooldown": "Soğutma",
+            "Cooldown": "Soğuma",
             "CreateHeadline": "Ön Ayar Oluştur",
-            "CustomGCode": "Özel G-Kod",
-            "EditCooldown": "Soğutmayı Düzenle",
+            "CustomGCode": "Özel G-Kodu",
+            "EditCooldown": "Soğuma Süresini Düzenle",
             "EditHeadline": "Ön Ayarı Düzenle",
             "ErrorInvalidValue": "Geçersiz değer",
-            "ErrorNameNotUnique": "Bu isim zaten mevcut",
-            "ErrorNameRequired": "İsim gerekli",
-            "Name": "İsim",
+            "ErrorNameNotUnique": "Ad zaten var",
+            "ErrorNameRequired": "Ad gerekiyor",
+            "Name": "Ad",
             "PreheatPresets": "Ön Ayarlar",
-            "PresetInfo": "Lütfen en azından bir hedef sıcaklık veya özel bir G-Kod ayarlayın.",
-            "PresetNamePlaceholder": "Ön ayar adı (gerekli)",
-            "StoreButton": "Ön ayarı depola",
-            "UpdateButton": "Ön ayarı güncelle",
-            "UpdateCooldown": "Soğutmayı Güncelle"
+            "PresetInfo": "Lütfen en az bir hedef sıcaklık veya özel G-Kodu belirleyin.",
+            "PresetNamePlaceholder": "Ön Ayar adı (gereklidir)",
+            "StoreButton": "Ön Ayarı Kaydet",
+            "UpdateButton": "Ön Ayarı Güncelle",
+            "UpdateCooldown": "Soğuma Süresini Güncelle"
         },
         "RemotePrintersTab": {
             "AddPrinter": "Yazıcı Ekle",
@@ -902,185 +977,213 @@
             "Port": "Port",
             "RemotePrinters": "Yazıcılar",
             "UpdatePrinter": "Yazıcıyı Güncelle",
-            "UseConfigJson": "InstanceDB = JSON algılandı. Yazıcı listesini değiştirmek için lütfen config.json'u kullanın."
+            "UseConfigJson": "InstanceDB = JSON algılandı. Lütfen yazıcı listesini düzenlemek için config.json dosyasını kullanın."
         },
-        "Store": "dükkan",
+        "Store": "Mağaza",
         "TimelapseTab": {
-            "Autorender": "Otomatik Oluşturma",
-            "AutorenderDescription": "Etkinleştirilirse, timelapse, baskının sonunda otomatik olarak oluşturulacaktır.",
+            "Autorender": "Otomatik Render",
+            "AutorenderDescription": "Etkinleştirildiğinde, timelapse videosu baskının sonunda otomatik olarak oluşturulur",
             "Camera": "Kamera",
             "CameraDescription": "Hangi kameranın kullanılacağını seçin",
             "ConstantRateFactor": "Sabit Oran Faktörü",
-            "ConstantRateFactorDescription": "Bu, oluşturulan videonun kalitesini ve dosya boyutunu yapılandırır. CRF ölçeğinin aralığı 0-51'dir, burada 0 kayıpsızdır, 23 varsayılandır ve 51 mümkün olan en kötü kalitedir. Daha düşük bir değer genellikle daha yüksek kaliteye yol açar ve öznel olarak makul bir aralık 17-28'dir. 17 veya 18'in görsel olarak kayıpsız olduğunu düşünün.",
-            "duplicatelastframe": "Son Kareyi Çoğalt",
-            "duplicatelastframeDescription": "Videonun sonundaki son kareyi çoğaltır",
-            "Enabled": "Etkinleştirildi",
-            "EnabledDescription": "Devre dışı bırakılırsa, G-Kod makroları yok sayılır ve otomatik oluşturma atlanır.",
+            "ConstantRateFactorDescription": "Bu, oluşturulan video kalitesini ve dosya boyutunu yapılandırır. CRF ölçeğinin aralığı 0-51 arasındadır, 0 kayıpsız, 23 varsayılan ve 51 en düşük kaliteye sahiptir. Daha düşük bir değer genellikle daha yüksek kaliteye yol açar ve nispeten sağlıklı bir aralık 17-28'dir. Görsel olarak kayıpsız kabul edilebilecek 17 veya 18'i düşünün.",
+            "duplicatelastframe": "Son Karesini Kopyala",
+            "duplicatelastframeDescription": "Video sonuna son kareyi kopyalar",
+            "Enabled": "Etkin",
+            "EnabledDescription": "Devre dışı bırakılırsa, G-Code makroları yok sayılır ve otomatik render atlanır.",
             "Extraoutputparams": "Ekstra Çıkış Parametreleri",
-            "ExtraoutputparamsDescription": "FFMPEG'e ekstra çıkış parametreleri tanımlar. Not: Burada herhangi bir şey belirtmek, döndürme ayarını devre dışı bırakacaktır.",
-            "FwRetract": "Bellenim Geri Çekmesi",
-            "FwRetractDescription": "Timelapse makrosunda bellenim geri çekmesini kullanın",
-            "GcodeVerbose": "Ayrıntılı G-Kod",
-            "GcodeVerboseDescription": "Etkinleştirilirse, G-Kod makroları konsola bilgi yazar",
+            "ExtraoutputparamsDescription": "FFMPEG'e ekstra çıkış parametreleri tanımlar. Not: Burada herhangi bir şey belirtmek dönüşüm ayarını devre dışı bırakacaktır.",
+            "FwRetract": "Yazılım Geri Çekme",
+            "FwRetractDescription": "Timelapse makrosunda firmware çekimi kullanır",
+            "GcodeVerbose": "Detaylı G-Code",
+            "GcodeVerboseDescription": "Etkinleştirildiğinde, G-Code makroları bilgiyi konsola yazar",
             "General": "Genel",
-            "HyperlapseCycle": "Hiperlapse Döngü Süresi",
-            "HyperlapseCycleDescription": "Herhangi bir X saniyede bir anlık görüntü alınacaktır",
+            "HyperlapseCycle": "Hyperlapse Döngü Süresi",
+            "HyperlapseCycleDescription": "Belirli saniye aralıklarında anlık görüntü alır",
             "Mode": "Mod",
             "ModeDescription": "Katman makrosu ve Hyperlapse (zamana dayalı) modu arasında seçim yapın",
             "OutputFramerate": "Çıkış Kare Hızı",
-            "OutputFramerateDescription": "Videonun kare hızını tanımlar. Not: değişken_fps etkinleştirilmişse bu yok sayılır",
-            "Parkhead": "Takım Kafasını Park Et",
-            "ParkheadDescription": "Etkinleştirilirse, bir çerçeve çekmeden önce araç başlığı park edilir.",
-            "Parkpos": "Park konumu",
+            "OutputFramerateDescription": "Video kare hızını belirler. Not: variable_fps etkinleştirildiyse bu göz ardı edilecektir.",
+            "Parkhead": "Baskı kafasını park et",
+            "ParkheadDescription": "Etkinleştirildiğinde, kamera başlık, bir kare almadan önce park edilecektir.",
+            "Parkpos": "Park Konumu",
             "ParkposDescription": "Park konumunu seçin",
-            "ParkTime": "Park Zamanı",
-            "ParkTimeDescription": "Park ederken ek boşta kalma süresi ekleyin.",
-            "Pixelformat": "Piksel biçimi",
-            "PixelformatDescription": "Çıkış videosunun piksel biçimini tanımlar",
-            "PosDZ": "Z konumu",
-            "PosDZDescription": "Park konumu Z (bağıl)",
-            "PosX": "X konumu",
+            "ParkTime": "Park Süresi",
+            "ParkTimeDescription": "Park ederken ekstra boş süre ekler.",
+            "Pixelformat": "Piksel Formatı",
+            "PixelformatDescription": "Oluşturulan videoyun piksel formatını tanımlar",
+            "PosDZ": "Konum Z",
+            "PosDZDescription": "Park konumu Z (göreceli)",
+            "PosX": "Konum X",
             "PosXDescription": "Park konumu X (mutlak)",
-            "PosY": "Y konumu",
+            "PosY": "Konum Y",
             "PosYDescription": "Park konumu Y (mutlak)",
-            "PreviewImage": "Resmi Önizle",
-            "PreviewImageDescription": "Videoyla aynı ada sahip bir önizleme resmi kaydedin",
-            "RenderingOptions": "İşleme Seçenekleri",
+            "PreviewImage": "Önizleme Resmi",
+            "PreviewImageDescription": "Video ile aynı isimde bir önizleme resmi kaydedin",
+            "RenderingOptions": "Render Seçenekleri",
             "RetractDistance": "Geri Çekme Mesafesi",
-            "RetractDistanceDescription": "Ekstrüderin geri çektiği filamentin uzunluğu.",
+            "RetractDistanceDescription": "Ekstruderin geri çektiği filamentin uzunluğu.",
             "RetractSpeed": "Geri Çekme Hızı",
-            "RetractSpeedDescription": "Ekstrüderin filamenti geri çekme hızı.",
-            "SaveFrames": "Çerçeveleri Kaydet",
-            "SaveFramesDescription": "Çerçeveleri harici işleme için bir zip dosyasına kaydedin",
-            "StreamDelayCompensation": "Akış Gecikmesi Telafisi",
-            "StreamDelayCompensationDescription": "Gecikmeli kare yakalama",
+            "RetractSpeedDescription": "Ekstruderin filamenti geri çektiği hız.",
+            "SaveFrames": "Kareleri Kaydet",
+            "SaveFramesDescription": "Dış render için kareleri bir zip dosyasına kaydedin",
+            "StreamDelayCompensation": "Akış Gecikme Telafisi",
+            "StreamDelayCompensationDescription": "Kare yakalama gecikmesi",
             "Targetlength": "Hedef Uzunluk",
-            "TargetlengthDescription": "Değişken FPS etkinleştirildiğinde hedef uzunluk",
-            "TimeFormatCode": "Zaman Formatı Kodu",
-            "TimeFormatCodeDescription": "Bu, çıktı dosyasındaki zaman damgasının nasıl kodlanması gerektiğini tanımlar.",
-            "Timelapse": "Timelapse",
-            "TravelSpeed": "Seyahat Hızı",
-            "TravelSpeedDescription": "Park konumuna hareket ederken ve devam ederken seyahat hızı",
-            "UnretractDistance": "Geri Verme Mesafesi",
-            "UnretractDistanceDescription": "Bir geri çekme işleminden sonra ekstrüderin geri verdiği filamentin uzunluğu.",
-            "UnretractSpeed": "Geri Verme Hızı",
-            "UnretractSpeedDescription": "Bir geri çekme işleminden sonra ekstrüderin filamenti geri verme hızı.",
+            "TargetlengthDescription": "Variable FPS etkinleştirildiğinde hedef uzunluk",
+            "TimeFormatCode": "Zaman Format Kodu",
+            "TimeFormatCodeDescription": "Çıkış dosyasındaki zaman damgasının nasıl kodlanacağını tanımlar",
+            "Timelapse": "Zaman Atlaması",
+            "TravelSpeed": "Hareket Hızı",
+            "TravelSpeedDescription": "Park konumuna ve devam etme sırasında seyahat hızı",
+            "UnretractDistance": "Geri Çekme Mesafesini İptal Et",
+            "UnretractDistanceDescription": "Ekstruderin geri çekmeyi iptal ettiği filamentin uzunluğu.",
+            "UnretractSpeed": "Geri Çekme Hızını İptal Et",
+            "UnretractSpeedDescription": "Ekstruderin geri çekmeyi iptal ettiği hız.",
             "VariableFps": "Değişken FPS",
-            "VariableFpsDescription": "Etkinleştirilirse, çıkış videosunun kare hızı hedef uzunluğa göre hesaplanacaktır.",
-            "VariableFpsMax": "Maksimum Değişken FPS",
+            "VariableFpsDescription": "Etkinleştirildiğinde, çıkış videosunun kare hızı hedef uzunluğa dayalı olarak hesaplanır",
+            "VariableFpsMax": "Değişken FPS maks.",
             "VariableFpsMaxDescription": "",
-            "VariableFpsMin": "Minimum Değişken FPS",
+            "VariableFpsMin": "Değişken FPS min.",
             "VariableFpsMinDescription": ""
         },
         "UiSettingsTab": {
-            "BoolBigThumbnail": "Büyük ön izleme görseli",
-            "BoolBigThumbnailDescription": "Yazdırma sırasında durum panelinde büyük bir ön izleme görseli görüntüleyin.",
-            "BoolHideUploadAndPrintButton": "Yükle ve Yazdır Düğmesini Gizle",
-            "BoolHideUploadAndPrintButtonDescription": "Üst çubukta \"Yükle ve Yazdır\" düğmesini gösterin veya gizleyin.",
-            "ConfirmOnEmergencyStop": "Acil Durdurmada onay iste",
-            "ConfirmOnEmergencyStopDescription": "Acil Durdurma'da bir onay iletişim kutusu göster",
-            "ConfirmOnPowerDeviceChange": "Cihaz Gücü değişikliklerinde onay gerektir",
-            "ConfirmOnPowerDeviceChangeDescription": "Cihaz Gücü değişikliklerinde bir onay iletişim kutusu göster",
-            "DisplayCANCEL_PRINT": "CANCEL_PRINT'i görüntüle",
-            "DisplayCANCEL_PRINTDescription": "CANCEL_PRINT düğmesini kalıcı olarak gösterir - ikinci katman onayı gerekmez.",
-            "GcodeThumbnails": "G-Kod ön izleme görselleri",
-            "GcodeThumbnailsDescription": "Talimatlara ulaşmak için düğmeye tıklayın.",
+            "BedScrewsDialog": "Tabla Vidaları Diyaloğu",
+            "BedScrewsDialogDescription": "BED_SCREWS_ADJUST için yardımcı diyaloğu göster",
+            "BoolBigThumbnail": "Büyük küçük resim",
+            "BoolBigThumbnailDescription": "Bir baskı sırasında durum panelinde büyük küçük resim göster",
+            "BoolHideUploadAndPrintButton": "Yükle ve Baskı Düğmesini Gizle",
+            "BoolHideUploadAndPrintButtonDescription": "Üst çubukta \"Yükle ve Baskı Yap\" düğmesini göster veya gizle",
+            "ConfirmOnEmergencyStop": "Acil Durdurma Onayı Gerektir",
+            "ConfirmOnEmergencyStopDescription": "Acil durdurma işleminde onaylama diyaloğunu göster",
+            "ConfirmOnPowerDeviceChange": "Cihaz Güç Değişikliğinde Onay Gerektir",
+            "ConfirmOnPowerDeviceChangeDescription": "Cihaz güç değişikliklerinde onaylama diyaloğunu göster",
+            "DisableFanAnimation": "Fan Animasyonunu Devre Dışı Bırak",
+            "DisableFanAnimationDescription": "Bu, tarayıcınızda bazı yükü azaltabilir.",
+            "DisplayCANCEL_PRINT": "CANCEL_PRINT'i Göster",
+            "DisplayCANCEL_PRINTDescription": "CANCEL_PRINT düğmesini sürekli göster - ikinci katman onayı gerekmez.",
+            "GcodeThumbnails": "G-Code küçük resimleri",
+            "GcodeThumbnailsDescription": "Kılavuzlara gitmek için düğmeye tıklayın.",
             "Guide": "Rehber",
-            "LockSliders": "Dokunmatik ekranlı cihazlarda kaydırıcıları kilitleyin",
-            "LockSlidersDelay": "Kaydırıcı kilit gecikmesi",
-            "LockSlidersDelayDescription": "Kaydırıcılar belirli bir gecikmeden sonra kilitlenir. 0 olarak ayarlanırsa veya boş bırakılırsa, kaydırıcılar yalnızca sayfa değiştirme/yeniden yükleme sırasında kilitlenir.",
-            "LockSlidersDescription": "Değişikliklere izin verilmeden önce dokunmatik ekranlardaki kaydırıcıların kilidinin açılması gerekir.",
+            "HideSaveConfigButtonForBedMesh": "Tabla Mesh'ini Değiştirmek İçin KAYDET_CONFIG Düğmesini Gizle",
+            "HideSaveConfigButtonForBedMeshDescription": "Sadece Tabla Mesh değişiklikleri bekleniyorsa KAYDET_CONFIG düğmesini gizle",
+            "HideUpdateWarnings": "Güncelleme Uyarılarını Gizle",
+            "HideUpdateWarningsDescription": "Bu seçenek, güncelleme yöneticisindeki tüm güncelleme uyarılarını gizler.",
+            "LockSliders": "Dokunmatik Ekran Cihazlarında Kaydırmaları Kilitle",
+            "LockSlidersDelay": "Kaydırma Kilitleme Gecikmesi",
+            "LockSlidersDelayDescription": "Kaydırmalar belirli bir gecikmeden sonra kilitleyecektir. 0 olarak ayarlanırsa veya boş bırakılırsa, kaydırmalar yalnızca sayfa değiştirme/yeniden yükleme sırasında kilitleyecektir.",
+            "LockSlidersDescription": "Dokunmatik ekranlardaki kaydırmaları değişiklik yapmadan önce kilitlemek gerekir.",
             "Logo": "Logo",
-            "NavigationStyle": "Navigasyon stili",
+            "ManualProbeDialog": "Manuel Prob Yardımcı Diyaloğu",
+            "ManualProbeDialogDescription": "PROBE_CALIBRATE veya Z_ENDSTOP_CALIBRATE için yardımcı diyaloğu göster",
+            "NavigationStyle": "Navigasyon Stili",
             "NavigationStyleDescription": "Navigasyon görünümünü değiştir",
-            "NavigationStyleIconsAndText": "Simgeler + Metin",
-            "NavigationStyleIconsOnly": "Yalnızca Simgeler",
+            "NavigationStyleIconsAndText": "Simge + Metin",
+            "NavigationStyleIconsOnly": "Yalnızca Simge",
+            "PowerDeviceName": "Yazıcı Güç Cihazı",
+            "PowerDeviceNameDescription": "Yazıcıyı açmak için kullanılacak Moonraker güç cihazını seçin.",
             "Primary": "Birincil",
-            "ShowWebcamInNavigation": "Web kamerasını navigasyonda göster",
-            "UiSettings": "Arayüz-Ayarları"
+            "ScrewsTiltAdjustDialog": "Vidaların Eğim Ayarı Diyaloğu",
+            "ScrewsTiltAdjustDialogDescription": "SCREWS_TILT_CALCULATE için yardımcı diyaloğu göster",
+            "TempchartHeight": "Sıcaklık Grafiği Yüksekliği",
+            "TempchartHeightDescription": "Gösterge Tablosundaki sıcaklık grafiğinin yüksekliğini değiştir",
+            "UiSettings": "UI Ayarları"
         },
-        "Update": "güncelleme",
+        "Update": "Güncelleme",
         "WebcamsTab": {
-            "AddWebcam": "web kamerası ekle",
-            "CreateWebcam": "Web Kamerası Oluştur",
-            "EditCrowsnestConf": "crowsnest.conf'u düzenle",
-            "EditWebcam": "Web Kamerası Düzenle",
-            "FlipWebcam": "Web kamerasını çevirin:",
-            "Horizontally": "yatay olarak",
+            "AddWebcam": "webcam ekle",
+            "CreateWebcam": "Webcam Oluştur",
+            "EditCrowsnestConf": "crowsnest.conf Dosyasını Düzenle",
+            "EditWebcam": "Webcam Düzenle",
+            "FlipWebcam": "Webcam Görüntüsünü Çevir:",
+            "Horizontally": "yatay",
             "IconBed": "Tabla",
             "IconCam": "Kamera",
             "IconDoor": "Kapı",
             "IconFilament": "Filament",
             "IconHot": "Sıcak",
             "IconMcu": "MCU",
-            "IconNozzle": "Nozül",
+            "IconNozzle": "Nozul",
             "IconPrinter": "Yazıcı",
-            "Ipstream": "IP Kamera",
+            "Ipstream": "IP Kamerası",
+            "Hlsstream": "HLS Akışı",
+            "WebrtcJanus": "WebRTC (janus-gateway)",
             "Mjpegstreamer": "MJPEG-Streamer",
-            "MjpegstreamerAdaptive": "Uyarlanabilir MJPEG-Streamer (deneysel)",
-            "Name": "İsim",
-            "NameAlreadyExists": "İsim zaten mevcut",
-            "Required": "gerekli",
+            "MjpegstreamerAdaptive": "Uyarlamalı MJPEG-Streamer (deneysel)",
+            "JMuxerStream": "Ham h264 akışı (jmuxer)",
+            "Name": "Ad",
+            "NameAlreadyExists": "Ad zaten var",
+            "Required": "zorunlu",
             "Rotate": "Döndür",
-            "SaveWebcam": "Web Kamerasını Kaydet",
-            "Service": "Servis",
+            "SaveWebcam": "Webcam Kaydet",
+            "Service": "Hizmet",
             "TargetFPS": "Hedef FPS",
-            "UpdateWebcam": "Web Kamerasını Güncelle",
-            "UrlSnapshot": "URL Anlık Görüntüsü",
+            "UpdateWebcam": "Webcam Güncelle",
+            "UrlSnapshot": "URL Anlık Görüntü",
             "UrlStream": "URL Akışı",
             "Uv4lMjpeg": "UV4L-MJPEG",
-            "Vertically": "dikey olarak",
-            "Webcams": "Web kameraları"
+            "Vertically": "dikey",
+            "Webcams": "Web Kameraları",
+            "WebrtcCameraStreamer": "WebRTC (kamera-streamer)",
+            "WebrtcMediaMTX": "WebRTC (MediaMTX / rtsp-simple-server)"
         }
     },
+    "ScrewsTiltAdjust": {
+        "Accept": "Kabul Et",
+        "Base": "Taban",
+        "ErrorText": "Prob işlemi sırasında bir sorun oluştu.",
+        "Headline": "Vidaların Eğim Ayarını Yap",
+        "Retry": "Yeniden Dene"
+    },
     "Timelapse": {
-        "AllFiles": "Hepsi",
-        "Autorender": "Otomatik oluşturma",
+        "AllFiles": "Tümü",
+        "Autorender": "Otomatik Render",
         "Cancel": "İptal",
         "Create": "Oluştur",
         "CreateNewDirectory": "dizin oluştur",
-        "CurrentPath": "Şuanki yol",
+        "CurrentPath": "Geçerli Yol",
         "Delete": "Sil",
         "DeleteDirectory": "Dizini Sil",
-        "DeleteDirectoryQuestion": "\"{name}\" dizinini tüm içeriğiyle birlikte gerçekten silmek istiyor musunuz?",
-        "DeleteSelectedQuestion": "Seçilen {count} dosyayı gerçekten silmek istiyor musunuz?",
+        "DeleteDirectoryQuestion": "\"{name}\" adlı dizini tüm içeriğiyle birlikte silmek istediğinizden emin misiniz?",
+        "DeleteSelectedQuestion": "{count} seçili dosyayı silmek istediğinizden emin misiniz?",
+        "DeleteSingleFileQuestion": "\"{name}\" dosyasını silmek istediğinizden emin misiniz?",
         "Download": "İndir",
         "DuplicateLastframe": "Son kareyi çoğalt",
-        "Empty": "Bitmiş timelapse bulunamadı.",
-        "Enabled": "Etkinleştirildi",
-        "EstimatedLength": "Tahmini uzunluk",
+        "Empty": "Tamamlanmış zaman atlama bulunamadı.",
+        "Enabled": "Etkin",
+        "EstimatedLength": "Tahmini süre",
         "Files": "Dosyalar",
-        "Filesize": "Dosyaboyutu",
+        "Filesize": "Dosya Boyutu",
         "Fixed": "sabit",
-        "Framerate": "Kare hızı",
+        "Framerate": "Kare Hızı",
         "Frames": "Kareler",
         "Free": "Boş",
-        "FreeDisk": "Boş disk",
-        "LastModified": "Son düzenleme",
+        "FreeDisk": "Boş Disk",
+        "LastModified": "Son Değiştirilme",
         "MaxFramerate": "Maks. kare hızı",
         "MinFramerate": "Min. kare hızı",
-        "Name": "İsim",
+        "Name": "Ad",
         "NewDirectory": "Yeni Dizin",
-        "NoActiveTimelapse": "Kayıt yok.",
-        "Preview": "Ön İzleme",
+        "NoActiveTimelapse": "Kullanılabilir kayıt yok.",
+        "Preview": "Önizleme",
         "RefreshCurrentDirectory": "dizini yenile",
         "Rename": "Yeniden Adlandır",
         "RenameDirectory": "Dizini Yeniden Adlandır",
         "RenameFile": "Dosyayı Yeniden Adlandır",
-        "Render": "render",
+        "Render": "Render",
         "RenderSettings": "Render Ayarları",
-        "SaveFrames": "Kareleri kaydet",
-        "Search": "ara",
-        "StartRender": "render'a başla",
+        "SaveFrames": "Kareleri Kaydet",
+        "Search": "Ara",
+        "StartRender": "Render'a Başla",
         "Status": "Durum",
         "TargetFps": "Hedef FPS",
-        "Targetlength": "Hedef uzunluk",
-        "TimelapseFiles": "Timelapse Dosyaları",
-        "TimelapseRendering": "Timelapse render'lama",
-        "TimelapseRenderingSuccessful": "Timelapse render'lama başarılı",
+        "Targetlength": "Hedef Uzunluk",
+        "TimelapseFiles": "Zaman Atlama Dosyaları",
+        "TimelapseRendering": "Zaman Atlama Render İşlemi",
+        "TimelapseRenderingSuccessful": "Zaman atlama render işlemi başarılı",
         "Total": "Toplam",
         "Type": "Tür",
-        "Used": "Kullanılmış",
+        "Used": "Kullanılan",
         "Variable": "Değişken",
         "Video": "Video"
     },
diff --git a/src/locales/uk.json b/src/locales/uk.json
index 50d90f509..10d1e5993 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -735,8 +735,6 @@
             "Editor": "Редактор",
             "KlipperRestartMethod": "Метод перезапуску Klipper",
             "KlipperRestartMethodDescription": "Виберіть, який метод перезавантаження буде використовуватися на 'Зберегти та перезапустити' під час редагування файлів конфігурації Klipper..",
-            "MoonrakerRestartInstance": "Інстанція перезапуску Moonraker",
-            "MoonrakerRestartInstanceDescription": "Виберіть, яка послуга Moonraker перезапуститься на 'Зберегти та перезапустити' під час редагування файлів конфігурації Moonraker.",
             "UseEscToClose": "Використовуйте ESC для закриття редактора",
             "UseEscToCloseDescription": "Дозволяє клавішу ESC закрити редактор"
         },
diff --git a/src/locales/zh.json b/src/locales/zh.json
index ddf293aba..c10a12961 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -30,6 +30,11 @@
             "NoEmptyAllowedError": "输入值不能为空！"
         },
         "Printers": "打印机集群",
+        "TheServiceWorker": {
+            "DescriptionNeedUpdate": "本地缓存已过时，需要进行更新。请点击下面的按钮来更新缓存。",
+            "TitleNeedUpdate": "PWA需要更新",
+            "Update": "更新"
+        },
         "ThrottledStates": {
             "DescriptionCurrentlyThrottled": "树莓派ARM核心当前被限制。",
             "DescriptionFrequencyCapped": "树莓派ARM最高频率目前限制在1.2 GHz。",
@@ -52,7 +57,7 @@
             "Complete": "已完成 - {filename}",
             "Error": "错误",
             "Pause": "暂停打印",
-            "PrinterOff": "关闭打印机",
+            "PrinterOff": "打印机已关闭",
             "Printing": "已打印 {percent}% - {filename}",
             "PrintingETA": "已打印 {percent}% - 预估: {eta} - {filename}"
         },
@@ -179,6 +184,7 @@
         "DeleteDirectory": "删除文件夹",
         "DeleteDirectoryQuestion": "你确定要删除\"{name}\"和里面的所有内容吗？",
         "DeleteSelectedQuestion": "你确定要删除选中的{count}个文件？",
+        "DeleteSingleFileQuestion": "你确定要删除文件\"{name}\"吗？",
         "Download": "下载",
         "Duplicate": "复制",
         "DuplicateFile": "复制文件",
@@ -316,6 +322,7 @@
         "Chart": "图表",
         "Delete": "删除",
         "DeleteSelectedQuestion": "你是否要删除已选中的{count}个任务？",
+        "DeleteSingleJobQuestion": "你是否要删除这个任务？",
         "Details": "详情",
         "EditNote": "编辑便条",
         "Empty": "没有内容",
@@ -403,6 +410,7 @@
             "DeleteDirectory": "删除文件夹",
             "DeleteDirectoryQuestion": "你确定删除\"{name}\"文件夹和里面的所有内容吗？",
             "DeleteSelectedQuestion": "删除已选中的{count}个项目？",
+            "DeleteSingleFileQuestion": "你确定要删除文件\"{name}\"吗？",
             "Download": "下载",
             "Duplicate": "复制",
             "DuplicateFile": "复制文件",
@@ -728,7 +736,7 @@
         "HostnameRequired": "需要配置主机名称/IP地址",
         "Port": "Moonraker服务端口",
         "PortRequired": "需要配置Moonraker服务端口",
-        "RememberToAdd": "请在moonraker.conf的'cors_domains'标签中添加{cors}",
+        "RememberToAdd": "请在moonraker.conf的'cors_domains'标签中添加'{cors}'",
         "SelectPrinter": "选择打印机",
         "TryAgain": "重试",
         "UpdatePrinter": "更新打印机",
@@ -801,8 +809,6 @@
             "Editor": "编辑器",
             "KlipperRestartMethod": "Klipper重启方法",
             "KlipperRestartMethodDescription": "编辑完Klipper配置文件并按下\"保存并重启\"按钮后，使用哪种重启方法。",
-            "MoonrakerRestartInstance": "重启Moonraker实例",
-            "MoonrakerRestartInstanceDescription": "编辑完Moonraker配置文件并按下\"保存并重启\"按钮后，重启哪个Moonraker服务。",
             "UseEscToClose": "使用ESC关闭编辑器",
             "UseEscToCloseDescription": "允许使用ESC键关闭编辑器",
             "TabSize": "TAB长度",
@@ -948,7 +954,7 @@
             "Port": "Moonraker服务端口",
             "RemotePrinters": "打印机",
             "UpdatePrinter": "更新打印机",
-            "UseConfigJson": "检测到InstanceDB = JSON。请使用 config.json 来修改打印机列表。"
+            "UseConfigJson": "检测到InstanceDB参数为JSON。请使用 config.json 来修改打印机列表。"
         },
         "Store": "存储",
         "TimelapseTab": {
@@ -1043,7 +1049,7 @@
             "LockSlidersDelayDescription": "滑动条将在给定延迟时间后锁定。如果设置为0或留空，滑动条将仅在页面更改/重新加载后锁定",
             "LockSlidersDescription": "在允许更改之前需要解锁触摸屏上的滑动条",
             "Logo": "Logo颜色",
-            "ManualProbeDialog": "手动探针助手对话框",
+            "ManualProbeDialog": "手动Probe助手对话框",
             "ManualProbeDialogDescription": "显示 PROBE_CALIBRATE 或 Z_ENDSTOP_CALIBRATE 的辅助程序对话框。",
             "NavigationStyle": "导航栏样式",
             "NavigationStyleDescription": "更改导航栏外观",
@@ -1077,9 +1083,9 @@
             "Ipstream": "IP摄像头",
             "Hlsstream": "HLS视频流",
             "WebrtcJanus": "WebRTC (janus-gateway)",
-            "Mjpegstreamer": "MJPEG视频流",
-            "MjpegstreamerAdaptive": "自适应MJPEG视频流(试验性)",
-            "JMuxerStream": "裸h264视频流 (jmuxer)",
+            "Mjpegstreamer": "MJPEG-Streamer",
+            "MjpegstreamerAdaptive": "Adaptive MJPEG-Streamer (试验性)",
+            "JMuxerStream": "原始h264视频流 (jmuxer)",
             "Name": "名称",
             "NameAlreadyExists": "名称已经存在",
             "Required": "需要填写名称",
@@ -1093,14 +1099,16 @@
             "Uv4lMjpeg": "UV4L-MJPEG",
             "Vertically": "垂直",
             "Webcams": "摄像头",
-            "WebrtcCameraStreamer": "WebRTC (摄像头视频流)"
+            "WebrtcCameraStreamer": "WebRTC (camera-streamer)",
+            "WebrtcMediaMTX": "WebRTC (MediaMTX / rtsp-simple-server)"
         }
     },
     "ScrewsTiltAdjust": {
         "Accept": "接受",
         "Base": "底座",
         "ErrorText": "探测过程中出现了问题。",
-        "Headline": "螺丝倾斜调整"
+        "Headline": "螺丝倾斜调整",
+        "Retry": "重试"
     },
     "Timelapse": {
         "AllFiles": "全部文件",
@@ -1113,6 +1121,7 @@
         "DeleteDirectory": "删除文件夹",
         "DeleteDirectoryQuestion": "你确定要删除\"{name}\"文件夹和里面所有的文件吗？",
         "DeleteSelectedQuestion": "你确定要删除选中的{count}个文件吗？",
+        "DeleteSingleFileQuestion": "你确定要删除文件\"{name}\"吗？",
         "Download": "下载",
         "DuplicateLastframe": "重复最后一帧",
         "Empty": "没有已完成的延时摄影文件",
diff --git a/src/locales/zh_TW.json b/src/locales/zh_TW.json
index 7cb8cf995..6a386fc9c 100644
--- a/src/locales/zh_TW.json
+++ b/src/locales/zh_TW.json
@@ -773,8 +773,6 @@
             "Editor": "編輯器",
             "KlipperRestartMethod": "Klipper重新啟動方法",
             "KlipperRestartMethodDescription": "編輯完Klipper設定檔案並按下\"儲存並重新啟動\"按鈕後，使用哪種重新啟動方法。",
-            "MoonrakerRestartInstance": "重新啟動Moonraker",
-            "MoonrakerRestartInstanceDescription": "編輯完Moonraker設定檔案並按下\"儲存並重新啟動\"按鈕後，重新啟動哪個Moonraker服務。",
             "Spaces": "空間： {count}",
             "TabSize": "標籤大小",
             "UseEscToClose": "使用 ESC 關閉編輯器",
diff --git a/src/plugins/StreamParserKlipperConfig.ts b/src/plugins/StreamParserKlipperConfig.ts
index d1b7ce9ed..ebd295dd3 100644
--- a/src/plugins/StreamParserKlipperConfig.ts
+++ b/src/plugins/StreamParserKlipperConfig.ts
@@ -291,22 +291,6 @@ export const klipper_config: StreamParser<any> = {
                     return jinja2Element(stream)
                 }
                 return gcode.token(stream, state, state.gcodeZeroPos ?? stream.pos)
-            } else if (state.variable) {
-                if (stream.sol()) {
-                    stream.eatSpace()
-                }
-                if (stream.match(/^\s*{[%#]?/)) {
-                    state.klipperMacroJinja = true
-                    if (stream.string.includes('{%')) {
-                        state.klipperMacroJinjaPctStack.push('{%')
-                    } else {
-                        state.klipperMacroJinjaBraceStack.push('{')
-                    }
-                    return 'tag'
-                }
-                if (state.klipperMacroJinja) {
-                    return jinja2Element(stream)
-                }
             } else if (state.pair) {
                 stream.eatSpace()
                 if (ch !== ',') {
@@ -324,15 +308,12 @@ export const klipper_config: StreamParser<any> = {
         if (state.was && stream.indentation() === 0) {
             state.pair = false
             state.gcode = false
-            state.variable = false
             state.was = false
         }
 
-        if (!state.pair && !state.gcode && !state.variable && stream.sol()) {
+        if (!state.pair && !state.gcode && stream.sol()) {
             if (stream.match(/^(?:[A-Za-z]*_?gcode|enable):/)) {
                 state.gcode = true
-            } else if (stream.match(/^variable_[a-zA-Z]+:/)) {
-                state.variable = true
             } else {
                 stream.match(/^.+?:\s*/)
                 state.pair = !stream.eol()
@@ -341,30 +322,6 @@ export const klipper_config: StreamParser<any> = {
             return 'atom'
         }
 
-        if (state.variable) {
-            if (stream.sol() || stream.eol()) {
-                state.variable = false
-                return null
-            }
-            if (stream.match(/^\s*{[%#]?/)) {
-                state.klipperMacroJinja = true
-                if (stream.string.includes('{%')) {
-                    state.klipperMacroJinjaPctStack.push('{%')
-                } else {
-                    state.klipperMacroJinjaBraceStack.push('{')
-                }
-                return 'tag'
-            } else {
-                // no Jinja in variable
-                state.pair = true
-                // state.variable = false
-            }
-            if (state.klipperMacroJinja) {
-                stream.eatSpace()
-                return jinja2Element(stream)
-            }
-        }
-
         if (state.pair) {
             if (ch === ':') {
                 stream.next()
@@ -395,7 +352,6 @@ export const klipper_config: StreamParser<any> = {
             pair: false,
             was: false,
             gcode: false,
-            variable: false,
             klipperMacro: false,
             gcodeZeroPos: null,
             klipperMacroJinja: false,
@@ -414,7 +370,6 @@ interface StreamParserKlipperConfigState {
     pair: boolean
     was: boolean
     gcode: boolean
-    variable: boolean
     gcodeZeroPos: number | null
     klipperMacro: boolean
     klipperMacroJinja: boolean
diff --git a/src/plugins/build-release_info.ts b/src/plugins/build-release_info.ts
new file mode 100644
index 000000000..7cafea2f9
--- /dev/null
+++ b/src/plugins/build-release_info.ts
@@ -0,0 +1,31 @@
+import fs from 'fs'
+import path from 'path'
+import { version } from '../../package.json'
+import { PluginOption } from 'vite'
+
+/**
+ * Custom build plugin to write the version in a dedicated release_info.json file after bundling
+ */
+
+export default function buildReleaseInfo(): PluginOption {
+    return {
+        name: 'build-release_info',
+        writeBundle: () => {
+            setImmediate(async () => {
+                const versionIdentifier = version.toString()
+                const releaseInfoFile = await fs.promises.open(
+                    path.resolve(__dirname, '../../dist/release_info.json'),
+                    'w'
+                )
+                await releaseInfoFile.writeFile(
+                    JSON.stringify({
+                        project_name: 'mainsail',
+                        project_owner: 'mainsail-crew',
+                        version: `v${versionIdentifier}`,
+                    })
+                )
+                await releaseInfoFile.close()
+            })
+        },
+    }
+}
diff --git a/src/store/editor/actions.ts b/src/store/editor/actions.ts
index 2ea3b7849..c5112a90f 100644
--- a/src/store/editor/actions.ts
+++ b/src/store/editor/actions.ts
@@ -127,11 +127,9 @@ export const actions: ActionTree<EditorState, RootState> = {
                 Vue.$toast.success(i18n.t('Editor.SuccessfullySaved', { filename: data.item.path }).toString())
                 if (payload.restartServiceName === 'klipper') {
                     const klipperRestartMethod = getters['getKlipperRestartMethod']
-                    //dispatch('server/addEvent', { message: 'FIRMWARE_RESTART', type: 'command' })
                     Vue.$socket.emit('printer.gcode.script', { script: klipperRestartMethod })
                 } else if (payload.restartServiceName === 'moonraker') {
-                    const moonrakerRestartInstance = getters['getMoonrakerRestartInstance']
-                    Vue.$socket.emit('machine.services.restart', { service: moonrakerRestartInstance })
+                    Vue.$socket.emit('server.restart', {})
                 } else if (payload.restartServiceName !== null) {
                     Vue.$socket.emit('machine.services.restart', { service: payload.restartServiceName })
                 }
diff --git a/src/store/editor/getters.ts b/src/store/editor/getters.ts
index 0e0da0cf9..59ab41323 100644
--- a/src/store/editor/getters.ts
+++ b/src/store/editor/getters.ts
@@ -5,13 +5,4 @@ export const getters: GetterTree<EditorState, any> = {
     getKlipperRestartMethod: (state, getters, rootState) => {
         return rootState.gui.editor?.klipperRestartMethod ?? 'FIRMWARE_RESTART'
     },
-
-    getMoonrakerRestartInstance: (state, getters, rootState) => {
-        const available_services = rootState.server?.system_info?.available_services ?? []
-        const setting = rootState.gui.editor?.moonrakerRestartInstance ?? 'moonraker'
-
-        if (available_services.includes(setting)) return setting
-
-        return 'moonraker'
-    },
 }
diff --git a/src/store/farm/printer/actions.ts b/src/store/farm/printer/actions.ts
index ceb1dbb91..b3da5a260 100644
--- a/src/store/farm/printer/actions.ts
+++ b/src/store/farm/printer/actions.ts
@@ -230,13 +230,10 @@ export const actions: ActionTree<FarmPrinterState, RootState> = {
             })
         }
 
-        if (payload.namespaces.includes('webcams')) {
-            dispatch('sendObj', {
-                method: 'server.database.get_item',
-                params: { namespace: 'webcams' },
-                action: 'getWebcamsData',
-            })
-        }
+        dispatch('sendObj', {
+            method: 'server.webcams.list',
+            action: 'getWebcamsData',
+        })
     },
 
     getMainsailData({ commit }, payload) {
@@ -244,6 +241,6 @@ export const actions: ActionTree<FarmPrinterState, RootState> = {
     },
 
     getWebcamsData({ commit }, payload) {
-        commit('setWebcamsData', payload.value)
+        commit('setWebcamsData', payload.webcams)
     },
 }
diff --git a/src/store/farm/printer/getters.ts b/src/store/farm/printer/getters.ts
index 41406c149..d87d44b64 100644
--- a/src/store/farm/printer/getters.ts
+++ b/src/store/farm/printer/getters.ts
@@ -52,7 +52,7 @@ export const getters: GetterTree<FarmPrinterState, any> = {
             if (state.data.print_stats.state === 'printing') {
                 const percent = getters['getPrintPercent']
 
-                return Math.round(percent * 100) + '% Printing'
+                return Math.floor(percent * 100) + '% Printing'
             }
 
             return state.data.print_stats.state.charAt(0).toUpperCase() + state.data.print_stats.state.slice(1)
@@ -308,14 +308,6 @@ export const getters: GetterTree<FarmPrinterState, any> = {
     },
 
     getPrinterWebcams: (state) => {
-        const webcams: GuiWebcamStateWebcam[] = []
-
-        if (state.data.webcams) {
-            Object.keys(state.data.webcams).forEach((id: string) => {
-                webcams.push({ ...state.data?.webcams[id], id })
-            })
-        }
-
-        return webcams
+        return state.data.webcams.filter((webcam: GuiWebcamStateWebcam) => webcam.enabled)
     },
 }
diff --git a/src/store/farm/printer/index.ts b/src/store/farm/printer/index.ts
index e7d5bc7d1..0245165ad 100644
--- a/src/store/farm/printer/index.ts
+++ b/src/store/farm/printer/index.ts
@@ -26,7 +26,7 @@ export const getDefaultState = (): FarmPrinterState => {
         },
         data: {
             gui: getGuiDefaultState(),
-            webcams: {},
+            webcams: [],
         },
         settings: {},
         databases: [],
diff --git a/src/store/farm/printer/types.ts b/src/store/farm/printer/types.ts
index 653392475..e1cd33d19 100644
--- a/src/store/farm/printer/types.ts
+++ b/src/store/farm/printer/types.ts
@@ -8,9 +8,7 @@ export interface FarmPrinterState {
     server: FarmPrinterStateServer
     data: {
         gui: GuiState
-        webcams: {
-            [key: string]: GuiWebcamStateWebcam
-        }
+        webcams: GuiWebcamStateWebcam[]
         // eslint-disable-next-line
         [key: string]: any
     }
diff --git a/src/store/getters.ts b/src/store/getters.ts
index c90386100..2cedd12b3 100644
--- a/src/store/getters.ts
+++ b/src/store/getters.ts
@@ -38,7 +38,7 @@ export const getters: GetterTree<RootState, any> = {
         // return printing title
         if (printer_state === 'printing') {
             const eta = getters['printer/getEstimatedTimeETAFormat']
-            const percent = (getters['printer/getPrintPercent'] * 100).toFixed(0)
+            const percent = Math.floor(getters['printer/getPrintPercent'] * 100)
 
             if (eta !== '--') {
                 let output = i18n.t('App.Titles.PrintingETA', {
diff --git a/src/store/gui/actions.ts b/src/store/gui/actions.ts
index b5ed974c3..e8070a9c0 100644
--- a/src/store/gui/actions.ts
+++ b/src/store/gui/actions.ts
@@ -468,4 +468,41 @@ export const actions: ActionTree<GuiState, RootState> = {
     announcementDismissFlag(_, payload) {
         window.console.log(payload)
     },
+
+    setChartDatasetStatus(
+        { commit, dispatch, state },
+        payload: { objectName: string; dataset: string; value: boolean }
+    ) {
+        commit('setChartDatasetStatus', payload)
+
+        dispatch('updateSettings', {
+            keyName: 'view.tempchart.datasetSettings',
+            newVal: state.view.tempchart.datasetSettings,
+        })
+    },
+
+    setDatasetAdditionalSensorStatus(
+        { commit, dispatch, state },
+        payload: { objectName: string; dataset: string; value: boolean }
+    ) {
+        commit('setDatasetAdditionalSensorStatus', payload)
+
+        dispatch('updateSettings', {
+            keyName: 'view.tempchart.datasetSettings',
+            newVal: state.view.tempchart.datasetSettings,
+        })
+    },
+
+    setChartColor({ commit, dispatch, state }, payload: { objectName: string; value: boolean }) {
+        commit('setChartDatasetStatus', {
+            objectName: payload.objectName,
+            dataset: 'color',
+            value: payload.value,
+        })
+
+        dispatch('updateSettings', {
+            keyName: 'view.tempchart.datasetSettings',
+            newVal: state.view.tempchart.datasetSettings,
+        })
+    },
 }
diff --git a/src/store/gui/getters.ts b/src/store/gui/getters.ts
index 9795085d8..f114cb3af 100644
--- a/src/store/gui/getters.ts
+++ b/src/store/gui/getters.ts
@@ -60,10 +60,9 @@ export const getters: GetterTree<GuiState, any> = {
             allPanels = allPanels.filter((name) => name !== 'extruder-control')
         }
 
-        // remove temperature panel, if heaters & sensors < 1
-        const printerAvailableHeaters = rootGetters['printer/getAvailableHeaters']
-        const printerTemperatureSensorKeys = rootGetters['printer/getTemperatureSensorKeys']
-        if (printerAvailableHeaters.length + printerTemperatureSensorKeys.length < 1) {
+        // remove temperature panel, if sensors < 1
+        const printerTemperatureSensors = rootState.printer?.heaters?.available_sensors ?? []
+        if (printerTemperatureSensors.length < 1) {
             allPanels = allPanels.filter((name) => name !== 'temperature')
         }
 
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 74fa10046..9b5022215 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -112,7 +112,6 @@ export const getDefaultState = (): GuiState => {
             confirmUnsavedChanges: true,
             klipperRestartMethod: 'FIRMWARE_RESTART',
             tabSize: 2,
-            moonrakerRestartInstance: null,
         },
         gcodeViewer: {
             extruderColors: ['#E76F51FF', '#F4A261FF', '#E9C46AFF', '#2A9D8FFF', '#264653FF'],
@@ -165,6 +164,7 @@ export const getDefaultState = (): GuiState => {
             boolBedScrewsDialog: true,
             boolScrewsTiltAdjustDialog: true,
             tempchartHeight: 250,
+            hideUpdateWarnings: false,
         },
         view: {
             blockFileUpload: false,
diff --git a/src/store/gui/mutations.ts b/src/store/gui/mutations.ts
index bbbce54f9..2fcc87e50 100644
--- a/src/store/gui/mutations.ts
+++ b/src/store/gui/mutations.ts
@@ -89,4 +89,43 @@ export const mutations: MutationTree<GuiState> = {
         layoutArray.splice(payload.index, 1)
         Vue.set(state.dashboard, payload.layoutname, layoutArray)
     },
+
+    setChartDatasetStatus(state, payload: { objectName: string; dataset: string; value: boolean }) {
+        // set new value if object doesn't exist in view.tempchart.datasetSettings
+        if (!(payload.objectName in state.view.tempchart.datasetSettings)) {
+            const newVal: { [key: string]: any } = {}
+            newVal[payload.dataset] = payload.value
+
+            Vue.set(state.view.tempchart.datasetSettings, payload.objectName, newVal)
+            return
+        }
+
+        Vue.set(state.view.tempchart.datasetSettings[payload.objectName], payload.dataset, payload.value)
+    },
+
+    setDatasetAdditionalSensorStatus(state, payload: { objectName: string; dataset: string; value: boolean }) {
+        // set new value if object doesn't exist in view.tempchart.datasetSettings
+        if (!(payload.objectName in state.view.tempchart.datasetSettings)) {
+            const newVal: { additionalSensors: { [key: string]: any } } = { additionalSensors: {} }
+            newVal.additionalSensors[payload.dataset] = payload.value
+
+            Vue.set(state.view.tempchart.datasetSettings, payload.objectName, newVal)
+            return
+        }
+
+        // set new value if additionalSensor object doesn't exist in view.tempchart.datasetSettings
+        if (!('additionalSensors' in state.view.tempchart.datasetSettings[payload.objectName])) {
+            const newVal: { [key: string]: any } = {}
+            newVal[payload.dataset] = payload.value
+
+            Vue.set(state.view.tempchart.datasetSettings[payload.objectName], 'additionalSensors', newVal)
+            return
+        }
+
+        Vue.set(
+            state.view.tempchart.datasetSettings[payload.objectName].additionalSensors,
+            payload.dataset,
+            payload.value
+        )
+    },
 }
diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index d818af047..dff97411c 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -60,7 +60,6 @@ export interface GuiState {
         confirmUnsavedChanges: boolean
         klipperRestartMethod: 'FIRMWARE_RESTART' | 'RESTART'
         tabSize: number
-        moonrakerRestartInstance: string | null
     }
     gcodeViewer: {
         extruderColors: string[]
@@ -115,6 +114,7 @@ export interface GuiState {
         boolBedScrewsDialog: boolean
         boolScrewsTiltAdjustDialog: boolean
         tempchartHeight: number
+        hideUpdateWarnings: boolean
     }
     view: {
         blockFileUpload: boolean
diff --git a/src/store/gui/webcams/actions.ts b/src/store/gui/webcams/actions.ts
index 49278044b..62d1abe07 100644
--- a/src/store/gui/webcams/actions.ts
+++ b/src/store/gui/webcams/actions.ts
@@ -1,7 +1,6 @@
 import { ActionTree } from 'vuex'
 import { RootState } from '@/store/types'
-import { GuiWebcamState } from '@/store/gui/webcams/types'
-import { v4 as uuidv4 } from 'uuid'
+import { GuiWebcamState, GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 import Vue from 'vue'
 
 export const actions: ActionTree<GuiWebcamState, RootState> = {
@@ -11,46 +10,25 @@ export const actions: ActionTree<GuiWebcamState, RootState> = {
 
     init() {
         window.console.debug('init gui/webcams')
-        Vue.$socket.emit('server.database.get_item', { namespace: 'webcams' }, { action: 'gui/webcams/initStore' })
+        Vue.$socket.emit('server.webcams.list', {}, { action: 'gui/webcams/initStore' })
     },
 
     async initStore({ commit, dispatch }, payload) {
         await commit('reset')
-        await commit('initStore', payload)
+        await commit('initStore', payload.webcams)
         await dispatch('socket/removeInitModule', 'gui/webcam/init', { root: true })
     },
 
-    upload(_, payload) {
-        Vue.$socket.emit('server.database.post_item', { namespace: 'webcams', key: payload.id, value: payload.value })
+    store(_, payload) {
+        Vue.$socket.emit('server.webcams.post_item', payload)
     },
 
-    store({ commit, dispatch, state }, payload) {
-        const id = uuidv4()
-
-        commit('store', { id, values: payload.values })
-        dispatch('upload', {
-            id,
-            value: state.webcams[id],
-        })
-    },
-
-    update({ commit, dispatch, state, rootState }, payload) {
-        commit('update', payload)
-        dispatch('upload', {
-            id: payload.id,
-            value: state.webcams[payload.id],
-        })
-
-        if (
-            rootState.server?.components.includes('timelapse') &&
-            rootState.server?.timelapse?.settings.camera === payload.id
-        ) {
-            dispatch('server/timelapse/saveSetting', { camera: payload.id }, { root: true })
-        }
+    update({ dispatch }, payload: { webcam: GuiWebcamStateWebcam; oldWebcamName: string }) {
+        Vue.$socket.emit('server.webcams.post_item', payload.webcam)
+        if (payload.webcam.name !== payload.oldWebcamName) dispatch('delete', payload.oldWebcamName)
     },
 
-    delete({ commit }, payload) {
-        commit('delete', payload)
-        Vue.$socket.emit('server.database.delete_item', { namespace: 'webcams', key: payload })
+    delete(_, payload: string) {
+        Vue.$socket.emit('server.webcams.delete_item', { name: payload })
     },
 }
diff --git a/src/store/gui/webcams/getters.ts b/src/store/gui/webcams/getters.ts
index 77720e1f6..7d69f83e8 100644
--- a/src/store/gui/webcams/getters.ts
+++ b/src/store/gui/webcams/getters.ts
@@ -4,18 +4,12 @@ import { GuiWebcamState, GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 // eslint-disable-next-line
 export const getters: GetterTree<GuiWebcamState, any> = {
     getWebcams: (state) => {
-        const webcams: GuiWebcamStateWebcam[] = []
-
-        Object.keys(state.webcams).forEach((id: string) => {
-            webcams.push({ ...state.webcams[id], id })
-        })
-
-        return webcams
+        return state.webcams.filter((webcam: GuiWebcamStateWebcam) => webcam.enabled)
     },
 
-    getWebcam: (state, getters) => (camId: string) => {
+    getWebcam: (_, getters) => (name: string) => {
         const webcams = getters['getWebcams'] ?? []
 
-        return webcams.find((webcam: GuiWebcamStateWebcam) => webcam.id === camId)
+        return webcams.find((webcam: GuiWebcamStateWebcam) => webcam.name === name)
     },
 }
diff --git a/src/store/gui/webcams/index.ts b/src/store/gui/webcams/index.ts
index 4fa4b81d6..67e98bd1d 100644
--- a/src/store/gui/webcams/index.ts
+++ b/src/store/gui/webcams/index.ts
@@ -6,7 +6,7 @@ import { GuiWebcamState } from '@/store/gui/webcams/types'
 
 export const getDefaultState = (): GuiWebcamState => {
     return {
-        webcams: {},
+        webcams: [],
     }
 }
 
diff --git a/src/store/gui/webcams/mutations.ts b/src/store/gui/webcams/mutations.ts
index 2c5062626..cd3fa2422 100644
--- a/src/store/gui/webcams/mutations.ts
+++ b/src/store/gui/webcams/mutations.ts
@@ -9,25 +9,6 @@ export const mutations: MutationTree<GuiWebcamState> = {
     },
 
     initStore(state, payload) {
-        Vue.set(state, 'webcams', payload.value)
-    },
-
-    store(state, payload) {
-        Vue.set(state.webcams, payload.id, payload.values)
-    },
-
-    update(state, payload) {
-        if (payload.id in state.webcams) {
-            const webcam = { ...state.webcams[payload.id] }
-            Object.assign(webcam, payload.values)
-
-            Vue.set(state.webcams, payload.id, webcam)
-        }
-    },
-
-    delete(state, payload) {
-        if (payload in state.webcams) {
-            Vue.delete(state.webcams, payload)
-        }
+        Vue.set(state, 'webcams', payload)
     },
 }
diff --git a/src/store/gui/webcams/types.ts b/src/store/gui/webcams/types.ts
index 16e55b13d..1fa1385bb 100644
--- a/src/store/gui/webcams/types.ts
+++ b/src/store/gui/webcams/types.ts
@@ -1,18 +1,30 @@
 export interface GuiWebcamState {
-    webcams: {
-        [key: string]: GuiWebcamStateWebcam
-    }
+    webcams: GuiWebcamStateWebcam[]
 }
 
 export interface GuiWebcamStateWebcam {
-    id?: string
     name: string
+    location?: string
+    service:
+        | 'hlsstream'
+        | 'ipstream'
+        | 'jmuxer-stream'
+        | 'mjpegstreamer'
+        | 'mjpegstreamer-adaptive'
+        | 'uv4l-mjpeg'
+        | 'webrtc-camerastreamer'
+        | 'webrtc-janus'
+        | 'webrtc-mediamtx'
+    enabled: boolean
     icon: string
-    service: 'mjpegstreamer' | 'mjpegstreamer-adaptive' | 'uv4l-mjpeg' | 'ipstream'
-    targetFps: number
-    urlStream: string
-    urlSnapshot: string
-    rotate?: number
-    flipX: boolean
-    flipY: boolean
+    target_fps: number
+    target_fps_idle?: number
+    stream_url: string
+    snapshot_url: string
+    flip_horizontal: boolean
+    flip_vertical: boolean
+    rotation: number
+    aspect_ratio?: string
+    extra_data?: {}
+    source?: 'config' | 'database'
 }
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index c7ffcc3eb..d9d330479 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -1,9 +1,4 @@
-import {
-    additionalSensors,
-    checkKlipperConfigModules,
-    opacityHeaterActive,
-    opacityHeaterInactive,
-} from '@/store/variables'
+import { checkKlipperConfigModules } from '@/store/variables'
 import { GetterTree } from 'vuex'
 import {
     PrinterState,
@@ -12,31 +7,15 @@ import {
     PrinterStateExtruderStepper,
     PrinterStateFan,
     PrinterStateFilamentSensors,
-    PrinterStateHeater,
-    PrinterStateTemperatureFan,
     PrinterStateMiscellaneous,
     PrinterStateMcu,
     PrinterStateMacro,
-    PrinterStateTemperatureObject,
-    PrinterStateTemperatureSensor,
     PrinterStateToolchangeMacro,
-    PrinterStateAdditionalSensor,
     PrinterGetterObject,
     PrinterStateLight,
 } from '@/store/printer/types'
 import { caseInsensitiveSort, formatFrequency, getMacroParams } from '@/plugins/helpers'
 import { RootState } from '@/store/types'
-import {
-    mdiFan,
-    mdiFire,
-    mdiPrinter3dNozzle,
-    mdiPrinter3dNozzleAlert,
-    mdiRadiator,
-    mdiRadiatorDisabled,
-    mdiThermometer,
-    mdiThermometerHigh,
-    mdiThermometerLow,
-} from '@mdi/js'
 
 export const getters: GetterTree<PrinterState, RootState> = {
     getPrintPercent: (state, getters, rootState) => {
@@ -196,266 +175,6 @@ export const getters: GetterTree<PrinterState, RootState> = {
         return getters['getMacros'].find((macro: PrinterStateMacro) => macro.name.toLowerCase() === nameLower)
     },
 
-    getHeaters: (state, getters, rootState, rootGetters) => {
-        const heaters: PrinterStateHeater[] = []
-        const colorOff = 'grey darken-2'
-        const colorHot = 'grey lighten-5'
-
-        if (state.heaters?.available_heaters) {
-            for (const [key, value] of Object.entries(state)) {
-                if (state.heaters.available_heaters.includes(key)) {
-                    let name = key
-                    const nameSplit = key.split(' ')
-
-                    if (nameSplit.length > 1 && nameSplit[0] === 'heater_generic') name = nameSplit[1]
-
-                    let icon = mdiPrinter3dNozzleAlert
-                    let color = colorOff
-                    if (value.target) color = colorHot
-
-                    if (nameSplit[0].startsWith('extruder')) {
-                        const min_extrude_temp =
-                            key in state.configfile.config && 'min_extrude_temp' in state.configfile.config[key]
-                                ? parseFloat(state.configfile.config[key].min_extrude_temp)
-                                : 170
-                        if (value.temperature >= min_extrude_temp) icon = mdiPrinter3dNozzle
-                    } else if (nameSplit[0] === 'heater_bed') {
-                        icon = mdiRadiatorDisabled
-                        if (value.temperature > 50 || (value.target && value.temperature > value.target - 5))
-                            icon = mdiRadiator
-                    } else if (nameSplit[0].startsWith('heater_generic')) icon = mdiFire
-
-                    if (!name.startsWith('_')) {
-                        heaters.push({
-                            name: name,
-                            type: nameSplit[0] as PrinterStateHeater['type'],
-                            icon: icon,
-                            iconColor: color,
-                            target: Math.round(value.target * 10) / 10,
-                            temperature: Math.round(value.temperature * 10) / 10,
-                            additionalSensors: getters.getAdditionalSensors(nameSplit[1]),
-                            power: Math.round((value.power ?? 0) * 100),
-                            avgPower: Math.round(getters['tempHistory/getAvgPower'](name) ?? 0),
-                            presets: rootGetters['gui/presets/getPresetsFromHeater']({ name: key }),
-                            chartColor: getters['tempHistory/getDatasetColor'](name),
-                            chartSeries: getters['tempHistory/getSerieNames'](name),
-                            min_temp: parseInt(state.configfile?.config[key]?.min_temp ?? 0),
-                            max_temp: parseInt(state.configfile?.config[key]?.max_temp ?? 0),
-                        })
-                    }
-                }
-            }
-        }
-
-        return caseInsensitiveSort(heaters, 'name')
-    },
-
-    getTemperatureFans: (state, getters, rootState, rootGetters) => {
-        const fans: PrinterStateTemperatureFan[] = []
-
-        for (const [key, value] of Object.entries(state)) {
-            const nameSplit = key.split(' ')
-
-            if (nameSplit[0] === 'temperature_fan' && !nameSplit[1].startsWith('_')) {
-                fans.push({
-                    name: nameSplit[1],
-                    icon: mdiFan,
-                    target: Math.round(value.target * 10) / 10,
-                    temperature: Math.round(value.temperature * 10) / 10,
-                    additionalSensors: getters.getAdditionalSensors(nameSplit[1]),
-                    speed: Math.round((value.speed ?? 0) * 100),
-                    avgSpeed: Math.round(getters['tempHistory/getAvgSpeed'](nameSplit[1]) ?? 0),
-                    rpm: value.rpm !== null ? Math.round(value.rpm) : null,
-                    presets: rootGetters['gui/presets/getPresetsFromHeater']({ name: key }),
-                    chartColor: getters['tempHistory/getDatasetColor'](nameSplit[1]),
-                    chartSeries: getters['tempHistory/getSerieNames'](nameSplit[1]),
-                    min_temp: parseInt(state.configfile?.config[key]?.min_temp ?? 0),
-                    max_temp: parseInt(state.configfile?.config[key]?.max_temp ?? 0),
-                })
-            }
-        }
-
-        return caseInsensitiveSort(fans, 'name')
-    },
-
-    getTemperatureSensorKeys: (state) => {
-        return Object.keys(state).filter((name) => name.startsWith('temperature_sensor ') && !name.startsWith('_'))
-    },
-
-    getTemperatureSensors: (state, getters, rootState, rootGetters) => {
-        const sensors: PrinterStateTemperatureSensor[] = []
-
-        const tempSensors = getters['getTemperatureSensorKeys']
-        tempSensors.forEach((key: string) => {
-            const nameSplit = key.split(' ')
-            const values = { ...state[key] }
-            let icon = mdiThermometer
-            const min_temp = state.configfile?.settings[key]?.min_temp ?? 0
-            const max_temp = state.configfile?.settings[key]?.max_temp ?? 210
-            const split = (max_temp - min_temp) / 3
-
-            if (values.temperature <= min_temp + split) icon = mdiThermometerLow
-            if (values.temperature >= max_temp - split) icon = mdiThermometerHigh
-
-            sensors.push({
-                name: nameSplit[1],
-                temperature: Math.round(values.temperature * 10) / 10,
-                additionalSensors: getters.getAdditionalSensors(nameSplit[1]),
-                icon: icon,
-                min_temp: min_temp,
-                max_temp: max_temp,
-                measured_min_temp: Math.round(values.measured_min_temp * 10) / 10,
-                measured_max_temp: Math.round(values.measured_max_temp * 10) / 10,
-                chartColor: getters['tempHistory/getDatasetColor'](nameSplit[1]),
-                chartSeries: getters['tempHistory/getSerieNames'](nameSplit[1]),
-            })
-        })
-
-        if ('z_thermal_adjust' in state) {
-            const key = 'z_thermal_adjust'
-            const values = state[key]
-            let icon = mdiThermometer
-            const min_temp = state.configfile?.settings[key]?.min_temp ?? 0
-            const max_temp = state.configfile?.settings[key]?.max_temp ?? 210
-            const split = (max_temp - min_temp) / 3
-
-            if (values.temperature <= min_temp + split) icon = mdiThermometerLow
-            if (values.temperature >= max_temp - split) icon = mdiThermometerHigh
-
-            const additionalSensorBool = rootGetters['gui/getDatasetAdditionalSensorValue']({
-                name: key,
-                sensor: 'z_adjust',
-            })
-
-            const additionalSensor: PrinterStateAdditionalSensor = {
-                bool: additionalSensorBool,
-                name: 'z_adjust',
-                unit: 'μm',
-                value: Math.round(values.current_z_adjust * 1000),
-            }
-
-            if (Math.abs(values.current_z_adjust) >= 0.1) {
-                additionalSensor.value = Math.round(values.current_z_adjust * 1000) / 1000
-                additionalSensor.unit = 'mm'
-            }
-
-            sensors.push({
-                name: key,
-                temperature: Math.round(values.temperature * 10) / 10,
-                additionalSensors: [additionalSensor],
-                icon,
-                min_temp: min_temp,
-                max_temp: max_temp,
-                measured_min_temp: Math.round(values.measured_min_temp * 10) / 10,
-                measured_max_temp: Math.round(values.measured_max_temp * 10) / 10,
-                chartColor: getters['tempHistory/getDatasetColor'](key),
-                chartSeries: getters['tempHistory/getSerieNames'](key),
-            })
-        }
-
-        return caseInsensitiveSort(sensors, 'name')
-    },
-
-    getTemperatureObjects: (state, getters, rootState) => {
-        const objects: PrinterStateTemperatureObject[] = []
-        const disableFanAnimation = rootState.gui?.uiSettings.disableFanAnimation ?? false
-
-        const heaters = getters['getHeaters']
-        if (heaters.length) {
-            heaters.forEach((heater: PrinterStateHeater) => {
-                objects.push({
-                    name: heater.name,
-                    type: heater.type,
-                    icon: heater.icon,
-                    iconColor:
-                        heater.target > 0
-                            ? `${heater.chartColor}${opacityHeaterActive}`
-                            : `${heater.chartColor}${opacityHeaterInactive}`,
-                    iconClass: '',
-                    state: heater.target > 0 ? heater.power + '%' : 'off',
-                    avgState: heater.avgPower + '%',
-                    temperature: heater.temperature,
-                    additionalSensors: heater.additionalSensors,
-                    target: heater.target,
-                    presets: heater.presets,
-                    min_temp: heater.min_temp,
-                    max_temp: heater.max_temp,
-                    measured_min_temp: null,
-                    measured_max_temp: null,
-                    rpm: null,
-                    rpmClass: '',
-                    command: 'SET_HEATER_TEMPERATURE',
-                    commandAttributeName: 'HEATER',
-                    chartColor: heater.chartColor,
-                    chartSeries: heater.chartSeries,
-                })
-            })
-        }
-
-        const temperature_fans = getters['getTemperatureFans']
-        if (temperature_fans.length) {
-            temperature_fans.forEach((fan: PrinterStateTemperatureFan) => {
-                objects.push({
-                    name: fan.name,
-                    type: 'temperature_fan',
-                    icon: fan.icon,
-                    iconColor:
-                        fan.target > 0
-                            ? `${fan.chartColor}${opacityHeaterActive}`
-                            : `${fan.chartColor}${opacityHeaterInactive}`,
-                    iconClass: !disableFanAnimation && fan.speed ? ' icon-rotate' : '',
-                    state: fan.target > 0 && fan.speed > 0 ? fan.speed + '%' : fan.target > 0 ? 'standby' : 'off',
-                    avgState: fan.avgSpeed + '%',
-                    temperature: fan.temperature,
-                    additionalSensors: fan.additionalSensors,
-                    target: fan.target,
-                    presets: fan.presets,
-                    min_temp: fan.min_temp,
-                    max_temp: fan.max_temp,
-                    measured_min_temp: null,
-                    measured_max_temp: null,
-                    rpm: fan.rpm,
-                    rpmClass: fan.rpm === 0 && fan.speed > 0 ? 'red--text' : '',
-                    command: 'SET_TEMPERATURE_FAN_TARGET',
-                    commandAttributeName: 'TEMPERATURE_FAN',
-                    chartColor: fan.chartColor,
-                    chartSeries: fan.chartSeries,
-                })
-            })
-        }
-
-        const temperature_sensors = getters['getTemperatureSensors']
-        if (temperature_sensors.length) {
-            temperature_sensors.forEach((sensor: PrinterStateTemperatureSensor) => {
-                objects.push({
-                    name: sensor.name,
-                    type: 'temperature_sensor',
-                    icon: sensor.icon,
-                    iconColor: `${sensor.chartColor}${opacityHeaterActive}`,
-                    iconClass: '',
-                    state: null,
-                    avgState: '',
-                    temperature: sensor.temperature,
-                    additionalSensors: sensor.additionalSensors,
-                    target: null,
-                    presets: [],
-                    min_temp: sensor.min_temp,
-                    max_temp: sensor.max_temp,
-                    measured_min_temp: sensor.measured_min_temp,
-                    measured_max_temp: sensor.measured_max_temp,
-                    rpm: null,
-                    rpmClass: '',
-                    command: null,
-                    commandAttributeName: null,
-                    chartColor: sensor.chartColor,
-                    chartSeries: sensor.chartSeries,
-                })
-            })
-        }
-
-        return objects
-    },
-
     getPartFanSpeed: (state) => {
         return 'fan' in state ? state.fan.speed : 0
     },
@@ -646,39 +365,6 @@ export const getters: GetterTree<PrinterState, RootState> = {
         })
     },
 
-    getAdditionalSensors: (state, getters, rootState, rootGetters) => (name: string) => {
-        const additionValues: PrinterStateAdditionalSensor[] = []
-
-        additionalSensors.forEach((sensorName) => {
-            if (sensorName + ' ' + name in state) {
-                Object.keys(state[sensorName + ' ' + name]).forEach((key) => {
-                    if (key !== 'temperature') {
-                        const bool = rootGetters['gui/getDatasetAdditionalSensorValue']({
-                            name: name,
-                            sensor: key,
-                        })
-
-                        let unit = ''
-                        if (key === 'pressure') unit = 'hPa'
-                        if (key === 'humidity') unit = '%'
-
-                        // eslint-disable-next-line
-                        const tmp: PrinterStateAdditionalSensor = {
-                            name: key,
-                            value: state[sensorName + ' ' + name][key].toFixed(1),
-                            bool,
-                            unit,
-                        }
-
-                        additionValues.push(tmp)
-                    }
-                })
-            }
-        })
-
-        return additionValues
-    },
-
     getAvailableHeaters: (state) => {
         return state.heaters?.available_heaters ?? []
     },
@@ -1071,10 +757,9 @@ export const getters: GetterTree<PrinterState, RootState> = {
         const date = new Date(eta)
         let am = true
         let h: string | number = date.getHours()
-        if (hours12Format && h > 12) {
-            am = false
-            h -= 12
-        }
+
+        if (hours12Format && h > 11) am = false
+        if (hours12Format && h > 12) h -= 12
         if (h < 10) h = '0' + h
 
         const m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
diff --git a/src/store/printer/tempHistory/actions.ts b/src/store/printer/tempHistory/actions.ts
index 2751ae6e8..6b09d0d1c 100644
--- a/src/store/printer/tempHistory/actions.ts
+++ b/src/store/printer/tempHistory/actions.ts
@@ -38,47 +38,65 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
             const importData: any = {}
 
             objectKeys.forEach((key: string) => {
-                if (allSensors.includes(key)) {
-                    const datasetValues = payload[key]
-                    datasetTypes.forEach((datasetKey) => {
-                        if (datasetKey + 's' in datasetValues) {
-                            const length = maxHistory - datasetValues[datasetKey + 's'].length
-                            datasetValues[datasetKey + 's'] = [
-                                ...Array.from({ length }, () => 0),
-                                ...datasetValues[datasetKey + 's'],
-                            ]
-                        }
-                    })
+                let nameOnly = key
+                if (nameOnly.indexOf(' ') !== -1) {
+                    nameOnly = nameOnly.substring(nameOnly.indexOf(' ') + 1)
+                }
+
+                // break if sensor doesn't exist anymore or start with a _
+                if (!allSensors.includes(key) || nameOnly.startsWith('_')) {
+                    delete payload[key]
+                    return
+                }
 
-                    importData[key] = { ...datasetValues }
-                } else delete payload[key]
+                const datasetValues = payload[key]
+                datasetTypes.forEach((datasetKey) => {
+                    if (datasetKey + 's' in datasetValues) {
+                        const length = maxHistory - datasetValues[datasetKey + 's'].length
+                        datasetValues[datasetKey + 's'] = [
+                            ...Array.from({ length }, () => 0),
+                            ...datasetValues[datasetKey + 's'],
+                        ]
+                    }
+                })
+
+                importData[key] = { ...datasetValues }
             })
 
-            //add missing heaters/sensors
+            // add missing heaters/sensors
             allSensors.forEach((key: string) => {
-                if (!(key in payload)) {
-                    const keySplits = key.split(' ')
-                    const sensorType = keySplits[0]
-
-                    const addValues: {
-                        temperatures: number[]
-                        targets?: number[]
-                        powers?: number[]
-                        speeds?: number[]
-                    } = {
-                        temperatures: Array(maxHistory).fill(0),
-                    }
+                // break if sensor is already in the cache
+                if (key in payload) return
+
+                let nameOnly = key
+                let sensorType = key
+                const indexOfFirstSpace = key.indexOf(' ')
+                if (indexOfFirstSpace !== -1) {
+                    nameOnly = key.substring(indexOfFirstSpace + 1)
+                    sensorType = key.substring(0, indexOfFirstSpace)
+                }
 
-                    if (allHeaters.includes(key)) {
-                        addValues.targets = Array(maxHistory).fill(0)
-                        addValues.powers = Array(maxHistory).fill(0)
-                    } else if (['temperature_fan'].includes(sensorType)) {
-                        addValues.targets = Array(maxHistory).fill(0)
-                        addValues.speeds = Array(maxHistory).fill(0)
-                    }
+                // break if sensorName starts with a _
+                if (nameOnly.startsWith('_')) return
+
+                const addValues: {
+                    temperatures: number[]
+                    targets?: number[]
+                    powers?: number[]
+                    speeds?: number[]
+                } = {
+                    temperatures: Array(maxHistory).fill(0),
+                }
 
-                    importData[key] = { ...addValues }
+                if (allHeaters.includes(key)) {
+                    addValues.targets = Array(maxHistory).fill(0)
+                    addValues.powers = Array(maxHistory).fill(0)
+                } else if (['temperature_fan'].includes(sensorType)) {
+                    addValues.targets = Array(maxHistory).fill(0)
+                    addValues.speeds = Array(maxHistory).fill(0)
                 }
+
+                importData[key] = { ...addValues }
             })
 
             const tempDataset = []
@@ -87,14 +105,12 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                     date: new Date(now.getTime() - 1000 * (maxHistory - i)),
                 }
 
-                Object.keys(importData).forEach((key) => {
-                    let name = key
-                    if (key.includes(' ')) name = key.split(' ')[1]
-
+                Object.keys(importData).forEach((objectName) => {
                     datasetTypes.forEach((attrKey) => {
-                        if (attrKey === 'temperature') tmpDataset[name] = importData[key]['temperatures'][i]
-                        else if (attrKey + 's' in importData[key])
-                            tmpDataset[name + '-' + attrKey] = importData[key][attrKey + 's'][i]
+                        const importDatasetName = `${attrKey}s`
+
+                        if (importDatasetName in importData[objectName])
+                            tmpDataset[`${objectName}-${attrKey}`] = importData[objectName][importDatasetName][i]
                     })
                 })
 
@@ -105,36 +121,28 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
 
             const tempDatasetKeys = Object.keys(tempDataset[0]).filter((tmp) => tmp !== 'date')
             const masterDatasetKeys = tempDatasetKeys
-                .filter((tmp) => {
-                    if (tmp.startsWith('_')) return false
-
-                    const lastIndex = tmp.lastIndexOf('-')
-                    if (lastIndex === -1) return true
-
-                    const suffix = tmp.slice(lastIndex + 1)
-                    return !['target', 'power', 'speed'].includes(suffix)
-                })
+                .filter((name) => name.endsWith('-temperature'))
+                .map((name) => name.slice(0, name.length - 12))
                 .sort()
             const series: PrinterTempHistoryStateSerie[] = []
             let colorNumber = 0
 
             masterDatasetKeys.forEach((name: string) => {
+                // get color from store (if exists)
                 let color = rootGetters['gui/getDatasetValue']({ name: name, type: 'color' })
 
+                // set color if there is no entry in the store
                 if (!color) {
-                    switch (name) {
-                        case 'heater_bed':
-                            color = colorHeaterBed
-                            break
-
-                        case 'chamber':
-                            color = colorChamber
-                            break
-
-                        default:
-                            color = colorArray[colorNumber]
-                            colorNumber++
-                            break
+                    // set heater_bed color
+                    if (name === 'heater_bed') color = colorHeaterBed
+
+                    // set color for chamber elements
+                    if (name.endsWith(' chamber')) color = colorChamber
+
+                    // fallback -> get random color from colorArray
+                    if (!color) {
+                        color = colorArray[colorNumber]
+                        colorNumber++
                     }
                 }
 
@@ -142,8 +150,8 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                     id: series.length + 1,
                     color: color,
                     type: 'line',
-                    name: name,
-                    encode: { x: 'date', y: name },
+                    name: `${name}-temperature`,
+                    encode: { x: 'date', y: `${name}-temperature` },
                     animation: false,
                     yAxisIndex: 0,
                     lineStyle: {
@@ -161,61 +169,55 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                     },
                 }
 
+                // add main serie to series
                 series.push(serie)
 
                 datasetTypes.forEach((attrKey) => {
+                    // break if datasetTypes is temperature, because its already in the array
+                    if (attrKey === 'temperature') return
+
                     const subName = name + '-' + attrKey
 
-                    if (tempDatasetKeys.includes(subName)) {
-                        const subSerie: PrinterTempHistoryStateSerie = {
-                            id: series.length + 1,
+                    // break if datasetType (target, speed, power) doesn't exist
+                    if (!tempDatasetKeys.includes(subName)) return
+
+                    // copy serie from temperature and change name
+                    // I have to use the JSON copy method, to have no issues with deep attributes
+                    const subSerie: PrinterTempHistoryStateSerie = JSON.parse(JSON.stringify(serie))
+                    subSerie.id = series.length + 1
+                    subSerie.name = subName
+                    subSerie.encode.y = subName
+
+                    // change settings for target datasets
+                    if (attrKey === 'target') {
+                        subSerie.lineStyle.width = 0
+                        subSerie.emphasis.lineStyle.width = 0
+
+                        subSerie.areaStyle = {
                             color: color,
-                            type: 'line',
-                            name: subName,
-                            encode: { x: 'date', y: subName },
-                            animation: false,
-                            yAxisIndex: 0,
-                            lineStyle: {
-                                color: color,
-                                width: 2,
-                                opacity: 0.1,
-                            },
-                            showSymbol: false,
-                            emphasis: {
-                                lineStyle: {
-                                    color: color,
-                                    width: 2,
-                                    opacity: 0.1,
-                                },
-                            },
+                            opacity: 0.1,
                         }
 
-                        if (attrKey === 'target') {
-                            subSerie.lineStyle.width = 0
-                            subSerie.emphasis.lineStyle.width = 0
-
-                            subSerie.areaStyle = {
-                                color: color,
-                                opacity: 0.1,
-                            }
-
-                            subSerie.emphasis.areaStyle = {
-                                color: color,
-                                opacity: 0.1,
-                            }
-                        } else if (datasetTypesInPercents.includes(attrKey)) {
-                            subSerie.yAxisIndex = 1
-
-                            subSerie.lineStyle.width = 1.5
-                            subSerie.lineStyle.opacity = 0.75
-                            subSerie.lineStyle.type = 'dotted'
-                            subSerie.emphasis.lineStyle.width = 1.5
-                            subSerie.emphasis.lineStyle.opacity = 0.75
-                            subSerie.emphasis.lineStyle.type = 'dotted'
+                        subSerie.emphasis.areaStyle = {
+                            color: color,
+                            opacity: 0.1,
                         }
+                    }
+
+                    // change axis & line settings for percent datasets
+                    if (datasetTypesInPercents.includes(attrKey)) {
+                        subSerie.yAxisIndex = 1
 
-                        series.push(subSerie)
+                        subSerie.lineStyle.width = 1.5
+                        subSerie.lineStyle.opacity = 0.75
+                        subSerie.lineStyle.type = 'dotted'
+                        subSerie.emphasis.lineStyle.width = 1.5
+                        subSerie.emphasis.lineStyle.opacity = 0.75
+                        subSerie.emphasis.lineStyle.type = 'dotted'
                     }
+
+                    // add sub serie to series
+                    series.push(subSerie)
                 })
             })
 
@@ -253,22 +255,22 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                 date: now,
             }
 
-            rootState.printer.heaters.available_sensors.forEach((key: string) => {
-                let name = key
-                if (key.includes(' ')) name = key.split(' ')[1]
-
-                if (rootState.printer && rootState.printer[key]) {
-                    if ('temperature' in rootState.printer[key]) data[name] = rootState.printer[key].temperature
-                    if ('target' in rootState.printer[key])
-                        data[name + '-target'] = Math.round(rootState.printer[key].target * 10) / 10
-                    if ('power' in rootState.printer[key])
-                        data[name + '-power'] = Math.round(rootState.printer[key].power * 1000) / 1000
-                    if ('speed' in rootState.printer[key])
-                        data[name + '-speed'] = Math.round(rootState.printer[key].speed * 1000) / 1000
-                }
+            rootState.printer.heaters.available_sensors.forEach((name: string) => {
+                if (!(rootState.printer && name in rootState.printer)) return
+                const printerObject = { ...rootState.printer[name] }
+
+                datasetTypes.forEach((attrKey) => {
+                    if (!(attrKey in printerObject)) return
+
+                    let value = Math.round(printerObject[attrKey] * 10) / 10
+                    if (datasetTypesInPercents.includes(attrKey))
+                        value = Math.round(printerObject[attrKey] * 1000) / 1000
+
+                    data[`${name}-${attrKey}`] = value
+                })
             })
 
-            await commit('addToSource', {
+            commit('addToSource', {
                 data: data,
                 maxHistory: rootGetters['printer/tempHistory/getTemperatureStoreSize'],
             })
@@ -276,4 +278,8 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
 
         //commit('saveLastDate', performance.now())
     },
+
+    setColor({ commit }, payload) {
+        commit('setColor', payload)
+    },
 }
diff --git a/src/store/printer/tempHistory/getters.ts b/src/store/printer/tempHistory/getters.ts
index 208fc680b..67e150854 100644
--- a/src/store/printer/tempHistory/getters.ts
+++ b/src/store/printer/tempHistory/getters.ts
@@ -8,10 +8,10 @@ import {
 import { RootState } from '@/store/types'
 
 export const getters: GetterTree<PrinterTempHistoryState, RootState> = {
-    getDatasetColor: (state) => (name: string) => {
-        const dataset = state.series.find((element) => element.name === name)
+    getDatasetColor: (_, getters) => (name: string) => {
+        const dataset = getters.getSeries(`${name}-temperature`)
 
-        return dataset && 'lineStyle' in dataset ? dataset.lineStyle.color : null
+        return dataset?.lineStyle?.color ?? null
     },
 
     getSeries: (state) => (name: string) => {
@@ -22,17 +22,10 @@ export const getters: GetterTree<PrinterTempHistoryState, RootState> = {
         const output: string[] = []
         const seriesKeys = state.series
             .map((serie: PrinterTempHistoryStateSerie) => serie.name)
-            .filter((serieName) => serieName.startsWith(name))
+            .filter((serieName) => serieName.startsWith(`${name}-`))
 
         seriesKeys.forEach((seriesKey) => {
-            if (seriesKey === name) {
-                output.push('temperature')
-                return
-            }
-
-            if (seriesKey.startsWith(name + '-')) {
-                output.push(seriesKey.slice(name.length + 1))
-            }
+            output.push(seriesKey.slice(name.length + 1))
         })
 
         return output
@@ -69,36 +62,51 @@ export const getters: GetterTree<PrinterTempHistoryState, RootState> = {
         return 0
     },
 
-    getAvgPower: (state, getters) => (name: string) => {
+    getAvgPower: (_, getters) => (name: string) => {
         return getters['getAvg'](name, 'power')
     },
 
-    getAvgSpeed: (state, getters) => (name: string) => {
+    getAvgSpeed: (_, getters) => (name: string) => {
         return getters['getAvg'](name, 'speed')
     },
 
-    getSelectedLegends: (state, getters, rootState, rootGetters) => {
+    getSelectedLegends: (state, _, rootState) => {
         interface legends {
             [key: string]: boolean
         }
 
         const selected: legends = {}
+        const available_sensors = rootState.printer?.heaters?.available_sensors ?? []
+        const viewSettings = rootState.gui?.view?.tempchart?.datasetSettings ?? {}
 
-        if (rootState.printer?.heaters?.available_sensors?.length) {
-            rootState.printer?.heaters?.available_sensors.forEach((key: string) => {
-                if (rootState.printer && key in rootState.printer) {
-                    let name = key
-                    if (key.includes(' ')) name = key.split(' ')[1]
-
-                    datasetTypes.forEach((datasetType: string) => {
-                        if (rootState?.printer && rootState?.printer[key] && datasetType in rootState.printer[key]) {
-                            const tmpName = datasetType === 'temperature' ? name : name + '-' + datasetType
-                            selected[tmpName] = rootGetters['gui/getDatasetValue']({ name: name, type: datasetType })
-                        }
-                    })
-                }
+        Object.keys(viewSettings).forEach((key) => {
+            // break if this element doesn't exist in available_sensors
+            if (!available_sensors.includes(key)) return
+
+            Object.keys(viewSettings[key]).forEach((attrKey) => {
+                // break if this element isn't a valid datasetType
+                if (!datasetTypes.includes(attrKey)) return
+
+                const serieName = `${key}-${attrKey}`
+
+                // break if serie in tempchart doesn't exist
+                if (state.series.findIndex((serie) => serie.name === serieName) === -1) return
+
+                // add to selected
+                selected[serieName] = viewSettings[key][attrKey]
             })
-        }
+        })
+
+        state.series.forEach((serie) => {
+            // break if object is already in the selected list
+            if (Object.keys(selected).includes(serie.name)) return
+
+            // get datasetType from the serie name
+            const datasetType = serie.name.slice(serie.name.lastIndexOf('-') + 1)
+
+            // add default value for this datasetType; all percent series are hidden per default
+            selected[serie.name] = !datasetTypesInPercents.includes(datasetType)
+        })
 
         return selected
     },
diff --git a/src/store/server/types.ts b/src/store/server/types.ts
index 41a0a8e7a..d11c23c88 100644
--- a/src/store/server/types.ts
+++ b/src/store/server/types.ts
@@ -1,5 +1,5 @@
 import { ServerPowerState } from '@/store/server/power/types'
-import { ServerUpdateMangerState } from '@/store/server/updateManager/types'
+import { ServerUpdateManagerState } from '@/store/server/updateManager/types'
 import { ServerHistoryState } from '@/store/server/history/types'
 import { ServerTimelapseState } from '@/store/server/timelapse/types'
 
@@ -58,7 +58,7 @@ export interface ServerState {
     console_cleared_this_session?: boolean
 
     power?: ServerPowerState
-    updateManager?: ServerUpdateMangerState
+    updateManager?: ServerUpdateManagerState
     history?: ServerHistoryState
     timelapse?: ServerTimelapseState
 }
diff --git a/src/store/server/updateManager/actions.ts b/src/store/server/updateManager/actions.ts
index a3b347ead..0fdf84543 100644
--- a/src/store/server/updateManager/actions.ts
+++ b/src/store/server/updateManager/actions.ts
@@ -1,19 +1,39 @@
 import Vue from 'vue'
 import { ActionTree } from 'vuex'
-import { ServerUpdateMangerState } from '@/store/server/updateManager/types'
+import { ServerUpdateManagerState } from '@/store/server/updateManager/types'
 import { RootState } from '@/store/types'
 
-export const actions: ActionTree<ServerUpdateMangerState, RootState> = {
+export const actions: ActionTree<ServerUpdateManagerState, RootState> = {
     reset({ commit }) {
         commit('reset')
     },
 
     init() {
-        Vue.$socket.emit('machine.update.status', {}, { action: 'server/updateManager/getStatus' })
+        Vue.$socket.emit('machine.update.status', {}, { action: 'server/updateManager/onUpdateStatus' })
     },
 
-    async getStatus({ commit, dispatch }, payload) {
-        await commit('setStatus', payload)
+    async onUpdateStatus({ commit, dispatch }, payload) {
+        await commit('resetRepos')
+
+        for (const key of Object.keys(payload.version_info)) {
+            const module = payload.version_info[key] ?? {}
+            const configured_type = module.configured_type ?? null
+
+            if (['git_repo', 'zip'].includes(configured_type)) {
+                await commit('storeGitRepo', { ...module, name: key })
+                continue
+            }
+
+            if (['web', 'web_beta'].includes(configured_type)) {
+                await commit('storeWebRepo', { ...module, name: key })
+                continue
+            }
+
+            if (key === 'system') {
+                await commit('updateSystem', { ...module })
+            }
+        }
+
         await dispatch('socket/removeInitModule', 'server/updateManager/init', { root: true })
     },
 }
diff --git a/src/store/server/updateManager/getters.ts b/src/store/server/updateManager/getters.ts
index 84611b24b..d28d87263 100644
--- a/src/store/server/updateManager/getters.ts
+++ b/src/store/server/updateManager/getters.ts
@@ -1,48 +1,28 @@
 import { GetterTree } from 'vuex'
-import { ServerUpdateMangerState } from '@/store/server/updateManager/types'
-import semver from 'semver'
+import { ServerUpdateManagerState, ServerUpdateManagerStateGuiList } from '@/store/server/updateManager/types'
+import { caseInsensitiveSort } from '@/plugins/helpers'
 
 // eslint-disable-next-line
-export const getters: GetterTree<ServerUpdateMangerState, any> = {
-    getUpdateableSoftwares(state) {
-        // eslint-disable-next-line
-        const output: any = {}
-        const sortKeys = Object.keys(state.version_info).sort((a, b) => {
-            if (a === 'klipper') return -1
-            if (b === 'klipper') return 1
-            if ('name' in state.version_info[a] && state.version_info[a].name === 'mainsail') return 1
-            if ('name' in state.version_info[b] && state.version_info[b].name === 'mainsail') return -1
-            if (a < b) return -1
-            if (a > b) return 1
-
-            return 0
+export const getters: GetterTree<ServerUpdateManagerState, any> = {
+    getUpdateManagerList(state): ServerUpdateManagerStateGuiList[] {
+        const output: ServerUpdateManagerStateGuiList[] = []
+
+        state.git_repos.forEach((repo) => {
+            output.push({
+                name: repo.name,
+                type: 'git',
+                data: { ...repo },
+            })
         })
 
-        for (const key of sortKeys) {
-            if ('system' !== key) {
-                output[key] = state.version_info[key]
-            }
-        }
-
-        return output
-    },
-
-    isUpdateAvailable(state) {
-        const keys = Object.keys(state.version_info).filter((key: string) => key !== 'system')
-
-        for (const key of keys) {
-            const versionInfo = state.version_info[key]
-
-            if (
-                'version' in versionInfo &&
-                'remote_version' in versionInfo &&
-                semver.valid(versionInfo.version) &&
-                semver.valid(versionInfo.remote_version) &&
-                semver.gt(versionInfo.remote_version, versionInfo.version)
-            )
-                return true
-        }
+        state.web_repos.forEach((repo) => {
+            output.push({
+                name: repo.name,
+                type: 'web',
+                data: { ...repo },
+            })
+        })
 
-        return false
+        return caseInsensitiveSort(output, 'name')
     },
 }
diff --git a/src/store/server/updateManager/index.ts b/src/store/server/updateManager/index.ts
index d10eab9ac..ed6cf3c1b 100644
--- a/src/store/server/updateManager/index.ts
+++ b/src/store/server/updateManager/index.ts
@@ -1,12 +1,21 @@
 import { Module } from 'vuex'
-import { ServerUpdateMangerState } from '@/store/server/updateManager/types'
+import { ServerUpdateManagerState } from '@/store/server/updateManager/types'
 import { actions } from '@/store/server/updateManager/actions'
 import { mutations } from '@/store/server/updateManager/mutations'
 import { getters } from '@/store/server/updateManager/getters'
 
-export const getDefaultState = (): ServerUpdateMangerState => {
+export const getDefaultState = (): ServerUpdateManagerState => {
     return {
-        version_info: {},
+        busy: false,
+        github_rate_limit: null,
+        github_requests_remaining: null,
+        github_limit_reset_time: null,
+        git_repos: [],
+        web_repos: [],
+        system: {
+            package_count: 0,
+            package_list: [],
+        },
         updateResponse: {
             application: '',
             complete: true,
@@ -19,7 +28,7 @@ export const getDefaultState = (): ServerUpdateMangerState => {
 const state = getDefaultState()
 
 // eslint-disable-next-line
-export const updateManager: Module<ServerUpdateMangerState, any> = {
+export const updateManager: Module<ServerUpdateManagerState, any> = {
     namespaced: true,
     state,
     getters,
diff --git a/src/store/server/updateManager/mutations.ts b/src/store/server/updateManager/mutations.ts
index ca939c49c..a584725ce 100644
--- a/src/store/server/updateManager/mutations.ts
+++ b/src/store/server/updateManager/mutations.ts
@@ -1,21 +1,42 @@
 import { getDefaultState } from './index'
 import Vue from 'vue'
 import { MutationTree } from 'vuex'
-import { ServerUpdateMangerState } from '@/store/server/updateManager/types'
+import { ServerUpdateManagerState } from '@/store/server/updateManager/types'
 
-export const mutations: MutationTree<ServerUpdateMangerState> = {
+export const mutations: MutationTree<ServerUpdateManagerState> = {
     reset(state) {
         Object.assign(state, getDefaultState())
     },
 
-    setStatus(state, payload) {
-        if ('version_info' in payload) {
-            Object.entries(payload.version_info).forEach(([key, value]) => {
-                Vue.set(state.version_info, key, value)
-            })
-        }
+    resetRepos(state) {
+        Vue.set(state, 'git_repos', [])
+        Vue.set(state, 'web_repos', [])
+        Vue.set(state, 'system', {
+            package_count: 0,
+            package_list: [],
+        })
+    },
+
+    storeGitRepo(state, payload) {
+        const newGitRepos = [...state.git_repos]
+        newGitRepos.push({ ...payload })
+
+        Vue.set(state, 'git_repos', newGitRepos)
+    },
+
+    storeWebRepo(state, payload) {
+        const newWebRepos = [...state.web_repos]
+        newWebRepos.push({ ...payload })
+
+        Vue.set(state, 'web_repos', newWebRepos)
+    },
+
+    updateSystem(state, payload) {
+        const newSystem = { ...state.system }
+        newSystem.package_count = payload.package_count
+        newSystem.package_list = payload.package_list
 
-        if (!payload.busy) Vue.set(state.updateResponse, 'complete', true)
+        Vue.set(state, 'system', newSystem)
     },
 
     addUpdateResponse(state, payload) {
@@ -26,7 +47,11 @@ export const mutations: MutationTree<ServerUpdateMangerState> = {
             Vue.set(state.updateResponse, 'complete', payload.complete)
 
         if ('complete' in payload && payload.complete)
-            Vue.$socket.emit('machine.update.status', { refresh: false }, { action: 'server/updateManager/getStatus' })
+            Vue.$socket.emit(
+                'machine.update.status',
+                { refresh: false },
+                { action: 'server/updateManager/onUpdateStatus' }
+            )
 
         state.updateResponse.messages.push({
             date: new Date(),
diff --git a/src/store/server/updateManager/types.ts b/src/store/server/updateManager/types.ts
index ae6aee648..3d51e40a8 100644
--- a/src/store/server/updateManager/types.ts
+++ b/src/store/server/updateManager/types.ts
@@ -1,21 +1,27 @@
-export interface ServerUpdateMangerState {
-    version_info: {
-        // eslint-disable-next-line
-        [key: string]: any
+export interface ServerUpdateManagerState {
+    busy: boolean
+    github_rate_limit: number | null
+    github_requests_remaining: number | null
+    github_limit_reset_time: number | null
+    git_repos: ServerUpdateManagerStateGitRepo[]
+    web_repos: ServerUpdateManagerStateGitRepo[]
+    system: {
+        package_count: number
+        package_list: string[]
     }
     updateResponse: {
         application: string
         complete: boolean
-        messages: ServerUpdateMangerStateMessages[]
+        messages: ServerUpdateManagerStateMessages[]
     }
 }
 
-export interface ServerUpdateMangerStateMessages {
+export interface ServerUpdateManagerStateMessages {
     date: Date
     message: string
 }
 
-export interface ServerUpdateMangerStateVersionInfoGitRepoCommits {
+export interface ServerUpdateManagerStateGitRepoCommit {
     sha: string
     author: string
     date: string
@@ -24,38 +30,38 @@ export interface ServerUpdateMangerStateVersionInfoGitRepoCommits {
     tag: string | null
 }
 
-export interface ServerUpdateMangerStateVersionInfoGitRepo {
-    branch: string
-    channel: string
-    commits_behind: ServerUpdateMangerStateVersionInfoGitRepoCommits[]
+export interface ServerUpdateManagerStateGitRepo {
+    name: string
     configured_type: string
-    current_hash: string
-    debug_enabled: boolean
-    detached: boolean
-    detected_type: string
-    full_version_string: string
-    git_messages: string[]
-    is_dirty: boolean
-    is_valid: boolean
-    need_channel_update: boolean
+    detected_type?: string
+    channel?: string
+    need_channel_update?: boolean
+    pristine?: boolean
     owner: string
-    pristine: boolean
-    remote_alias: string
-    remote_hash: string
-    remote_version: string
+    branch?: string
+    remote_alias?: string
     version: string
+    remote_version: string
+    full_version_string?: string
+    current_hash?: string
+    remote_hash?: string
+    is_valid?: boolean
+    is_dirty?: boolean
+    detached?: boolean
+    debug_enabled?: boolean
+    commits_behind?: ServerUpdateManagerStateGitRepoCommit[]
+    git_messages?: string[]
+    warnings?: string[]
+    info_tags?: string[]
 }
 
-export interface ServerUpdateMangerStateVersionInfoWeb {
-    channel: string
-    configured_type: string
-    name: string
-    owner: string
-    remote_version: string
-    version: string
+export interface ServerUpdateManagerStateGitRepoGroupedCommits {
+    date: Date
+    commits: ServerUpdateManagerStateGitRepoCommit[]
 }
 
-export interface ServerUpdateMangerStateVersionInfoSystem {
-    package_count: number
-    package_list: string[]
+export interface ServerUpdateManagerStateGuiList {
+    name: string
+    type: 'git' | 'web'
+    data: ServerUpdateManagerStateGitRepo
 }
diff --git a/src/store/socket/actions.ts b/src/store/socket/actions.ts
index c2f399682..a231fa051 100644
--- a/src/store/socket/actions.ts
+++ b/src/store/socket/actions.ts
@@ -93,7 +93,7 @@ export const actions: ActionTree<SocketState, RootState> = {
                 break
 
             case 'notify_update_refreshed':
-                commit('server/updateManager/setStatus', payload.params[0], { root: true })
+                dispatch('server/updateManager/onUpdateStatus', payload.params[0], { root: true })
                 break
 
             case 'notify_history_changed':
@@ -124,6 +124,10 @@ export const actions: ActionTree<SocketState, RootState> = {
                 dispatch('server/announcements/getWaked', payload.params[0], { root: true })
                 break
 
+            case 'notify_webcams_changed':
+                dispatch('gui/webcams/initStore', payload.params[0], { root: true })
+                break
+
             default:
                 window.console.debug(payload)
         }
diff --git a/src/store/variables.ts b/src/store/variables.ts
index a99119bca..d2a847be4 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -2,7 +2,7 @@ export const defaultLogoColor = '#D41216'
 export const defaultPrimaryColor = '#2196f3'
 
 export const minKlipperVersion = 'v0.11.0-97'
-export const minMoonrakerVersion = 'v0.7.1-797'
+export const minMoonrakerVersion = 'v0.8.0-38'
 
 export const colorArray = ['#F44336', '#8e379d', '#03DAC5', '#3F51B5', '#ffde03', '#009688', '#E91E63']
 
diff --git a/vite.config.ts b/vite.config.ts
index 44ba88c66..acf4f2b9a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,6 +8,7 @@ import checker from 'vite-plugin-checker'
 
 import path from 'path'
 import buildVersion from './src/plugins/build-version'
+import buildReleaseInfo from './src/plugins/build-release_info'
 import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa'
 
 const PWAConfig: Partial<VitePWAOptions> = {
@@ -66,6 +67,7 @@ export default defineConfig({
     plugins: [
         VitePWA(PWAConfig),
         buildVersion(),
+        buildReleaseInfo(),
         vue(),
         loadVersion(),
         checker({ typescript: true }),