diff --git a/src/components/dialogs/MmuEditGateMapDialog.vue b/src/components/dialogs/MmuEditGateMapDialog.vue
new file mode 100644
index 000000000..ba1d72a2a
--- /dev/null
+++ b/src/components/dialogs/MmuEditGateMapDialog.vue
@@ -0,0 +1,682 @@
+<template>
+    <div>
+        <v-dialog v-model="showDialog" width="800" persistent :fullscreen="isMobile">
+            <panel
+                :title="$t('Panels.MmuPanel.EditGateMap')"
+                :icon="mdiDatabaseEdit"
+                card-class="mmu-edit-ttg-map-dialog">
+                <template #buttons>
+                    <v-btn icon tile @click="close">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+
+                <!-- UPPER SECTION -->
+                <v-card-subtitle>
+                    <v-container fluid>
+                        <!-- HEADER -->
+                        <v-row>
+                            <v-col cols="8" class="d-flex justify-start align-center no-padding">
+                                {{ $t('Panels.MmuPanel.GateMapDialog.SelectGate') }}
+                            </v-col>
+                            <v-col cols="4" class="d-flex justify-end no-padding">
+                                <v-btn
+                                    small
+                                    color="secondary"
+                                    class="small-font"
+                                    :loading="loadings.includes('mmu_ttg_map')"
+                                    @click="resetGateMap()">
+                                    {{ $t('Panels.MmuPanel.GateMapDialog.Reset') }}
+                                </v-btn>
+                            </v-col>
+                        </v-row>
+
+                        <!-- DISPLAY GATES -->
+                        <v-row align="start">
+                            <v-col class="d-flex justify-start align-center no-padding">
+                                <mmu-machine
+                                    :edit-gate-map="editGateMap"
+                                    :edit-gate-selected="editGateSelected"
+                                    @select-gate="selectGate" />
+                            </v-col>
+                        </v-row>
+                    </v-container>
+                </v-card-subtitle>
+
+                <v-divider />
+
+                <!-- LOWER SECTION -->
+                <v-card-text class="px-4 pb-4">
+                    <div class="fixed-area">
+                        <transition name="fade">
+                            <div v-if="editGateSelected === -1" class="overlay-text">
+                                {{ $t('Panels.MmuPanel.GateMapDialog.SelectGate') }}
+                            </div>
+                        </transition>
+
+                        <transition name="fade">
+                            <v-container v-if="editGateSelected !== -1">
+                                <v-row class="ms-0 me-0 mb-4">
+                                    <v-col
+                                        class="d-flex justify-start align-center no-padding small-font text--secondary">
+                                        <div v-if="spoolmanSupport === SPOOLMAN_PULL">
+                                            {{
+                                                $t('Panels.MmuPanel.GateMapDialog.SpoolmanPull', {
+                                                    mode: spoolmanSupport,
+                                                })
+                                            }}
+                                        </div>
+                                        <div v-else-if="spoolmanSupport === SPOOLMAN_OFF">
+                                            {{
+                                                $t('Panels.MmuPanel.GateMapDialog.SpoolmanOff', {
+                                                    mode: spoolmanSupport,
+                                                })
+                                            }}
+                                        </div>
+                                        <div v-else>
+                                            {{
+                                                $t('Panels.MmuPanel.GateMapDialog.SpoolmanOther', {
+                                                    mode: spoolmanSupport,
+                                                })
+                                            }}
+                                        </div>
+                                    </v-col>
+                                </v-row>
+
+                                <!-- GATE DETAILS-->
+                                <v-row>
+                                    <v-col
+                                        cols="12"
+                                        md="6"
+                                        class="d-flex flex-column justify-start align-left no-padding pt-3">
+                                        <v-row>
+                                            <v-col cols="6" class="pt-5 ps-6">
+                                                <v-switch
+                                                    v-model="useSpoolman"
+                                                    :label="$t('Panels.MmuPanel.GateMapDialog.Spoolman')"
+                                                    :disabled="
+                                                        spoolmanSupport === SPOOLMAN_PULL ||
+                                                        spoolmanSupport === SPOOLMAN_OFF
+                                                    "
+                                                    hide-details
+                                                    class="short-switch" />
+                                            </v-col>
+                                            <v-col cols="6">
+                                                <v-text-field
+                                                    v-model="editGateMap[editGateSelected].spoolId"
+                                                    type="number"
+                                                    :label="$t('Panels.MmuPanel.GateMapDialog.SpoolmanId')"
+                                                    :rules="spoolIdRules()"
+                                                    :disabled="
+                                                        !useSpoolman ||
+                                                        spoolmanSupport === SPOOLMAN_PULL ||
+                                                        spoolmanSupport === SPOOLMAN_OFF
+                                                    "
+                                                    :hide-spin-buttons="
+                                                        !useSpoolman ||
+                                                        spoolmanSupport === SPOOLMAN_PULL ||
+                                                        spoolmanSupport === SPOOLMAN_OFF
+                                                    "
+                                                    outlined
+                                                    dense
+                                                    @blur="adjustSpoolId" />
+                                            </v-col>
+                                        </v-row>
+
+                                        <v-row>
+                                            <v-col cols="12" class="ps-6">
+                                                <v-text-field
+                                                    v-model.trim="editGateMap[editGateSelected].filamentName"
+                                                    :label="$t('Panels.MmuPanel.GateMapDialog.FilamentName')"
+                                                    :disabled="useSpoolman || spoolmanSupport === SPOOLMAN_PULL"
+                                                    outlined
+                                                    dense
+                                                    clearable
+                                                    hide-details
+                                                    @blur="adjustName" />
+                                            </v-col>
+                                        </v-row>
+
+                                        <v-row>
+                                            <v-col cols="6" class="ps-6">
+                                                <v-text-field
+                                                    v-model.trim="editGateMap[editGateSelected].material"
+                                                    :label="$t('Panels.MmuPanel.GateMapDialog.Material')"
+                                                    :disabled="useSpoolman || spoolmanSupport === SPOOLMAN_PULL"
+                                                    outlined
+                                                    dense
+                                                    clearable
+                                                    hide-details
+                                                    @blur="adjustMaterial" />
+                                            </v-col>
+                                            <v-col cols="2"></v-col>
+                                            <v-col cols="4">
+                                                <v-text-field
+                                                    v-model="editGateMap[editGateSelected].temperature"
+                                                    type="number"
+                                                    :label="$t('Panels.MmuPanel.GateMapDialog.Temperature')"
+                                                    :disabled="useSpoolman || spoolmanSupport === SPOOLMAN_PULL"
+                                                    :hide-spin-buttons="
+                                                        useSpoolman || spoolmanSupport === SPOOLMAN_PULL
+                                                    "
+                                                    suffix="°C"
+                                                    :rules="temperatureRules"
+                                                    outlined
+                                                    dense
+                                                    hide-details
+                                                    @blur="adjustTemperature" />
+                                            </v-col>
+                                        </v-row>
+
+                                        <v-row class="pt-3 pb-3 ps-3">
+                                            <v-divider />
+                                        </v-row>
+
+                                        <v-row>
+                                            <v-col cols="12" class="ps-6">
+                                                <v-switch
+                                                    v-model="selectedGateStatus"
+                                                    :label="$t('Panels.MmuPanel.GateMapDialog.FilamentAvailable')"
+                                                    hide-details
+                                                    class="short-switch" />
+                                            </v-col>
+                                        </v-row>
+
+                                        <v-row>
+                                            <v-col cols="12">
+                                                <v-subheader class="speed-slider-subheader ps-6 pe-1">
+                                                    <v-icon small class="mr-2">{{ mdiSpeedometer }}</v-icon>
+                                                    <span>{{ $t('Panels.MmuPanel.GateMapDialog.LoadSpeed') }}</span>
+                                                    <v-spacer></v-spacer>
+                                                    <v-text-field
+                                                        v-model="editGateMap[editGateSelected].speedOverride"
+                                                        type="number"
+                                                        suffix="%"
+                                                        hide-spin-buttons
+                                                        hide-details
+                                                        outlined
+                                                        dense
+                                                        readonly
+                                                        class="_slider-input d-flex align-center pt-1">
+                                                        <template #append>
+                                                            <v-icon small @click="resetSpeed">{{ mdiRestart }}</v-icon>
+                                                        </template>
+                                                    </v-text-field>
+                                                </v-subheader>
+
+                                                <v-card-text class="pb-0 pe-0 pt-1 d-flex align-center">
+                                                    <v-slider
+                                                        v-model="editGateMap[editGateSelected].speedOverride"
+                                                        :min="10"
+                                                        :max="150"
+                                                        hide-details>
+                                                        <template #prepend>
+                                                            <v-icon @click="decrementSpeed">{{ mdiMinus }}</v-icon>
+                                                        </template>
+                                                        <template #append>
+                                                            <v-icon @click="incrementSpeed">{{ mdiPlus }}</v-icon>
+                                                        </template>
+                                                    </v-slider>
+                                                </v-card-text>
+                                            </v-col>
+                                        </v-row>
+
+                                        <v-row>
+                                            <v-spacer />
+                                        </v-row>
+                                    </v-col>
+
+                                    <v-col cols="12" md="6" class="d-flex justify-center">
+                                        <div v-if="!useSpoolman">
+                                            <v-color-picker
+                                                v-model="editGateMap[editGateSelected].color"
+                                                hide-inputs
+                                                swatches-max-height="120px"
+                                                show-swatches
+                                                mode="hexa"
+                                                show-alpha
+                                                hide-opacity="false" />
+                                        </div>
+                                        <div v-else>
+                                            <div :class="!spoolIdExists ? 'no-spool' : ''">
+                                                <spool-icon
+                                                    height="120px"
+                                                    width="100%"
+                                                    :color="spoolmanColor"
+                                                    @click-spool="showSpoolmanSpoolChooserDialog = true" />
+                                                <div class="pt-4">{{ spoolmanLastUsed }}</div>
+                                                <div>
+                                                    <strong>{{ spoolmanRemainingWeight }}</strong>
+                                                    <small class="ml-1">/ {{ spoolmanTotalWeight }}</small>
+                                                </div>
+                                            </div>
+                                            <div style="padding-top: 12px">
+                                                <v-btn
+                                                    block
+                                                    color="secondary"
+                                                    class="spoolman-btn"
+                                                    @click="showSpoolmanSpoolChooserDialog = true">
+                                                    <v-icon>{{ mdiAdjust }}</v-icon>
+                                                    {{ $t('Panels.MmuPanel.GateMapDialog.ChooseSpool') }}
+                                                </v-btn>
+                                            </div>
+                                        </div>
+                                    </v-col>
+                                </v-row>
+                            </v-container>
+                        </transition>
+                    </div>
+                </v-card-text>
+
+                <v-card-actions>
+                    <v-spacer />
+                    <v-btn text @click="close">{{ $t('Panels.MmuPanel.Cancel') }}</v-btn>
+                    <v-btn color="primary" text @click="commit">
+                        {{ $t('Panels.MmuPanel.Ok') }}
+                    </v-btn>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
+
+        <!-- SPOOLMAN (ADAPTED) SPOOL SELECTOR -->
+        <spoolman-change-spool-dialog
+            :show-dialog="showSpoolmanSpoolChooserDialog"
+            :set-active-spool="false"
+            @select-spool="selectSpoolmanSpool"
+            @close="showSpoolmanSpoolChooserDialog = false" />
+
+        <!-- CONFIRMATION FOR RESET ACTION -->
+        <confirmation-dialog
+            :show="showConfirmationDialog"
+            :title="$t('Panels.MmuPanel.Dialog.AreYouSure')"
+            :text="$t('Panels.MmuPanel.GateMapDialog.ResetConfirmation')"
+            :action-button-text="$t('Panels.MmuPanel.GateMapDialog.Reset')"
+            :cancel-button-text="$t('Panels.MmuPanel.Cancel')"
+            @action="executeResetGateMap"
+            @close="showConfirmationDialog = false" />
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+import Panel from '@/components/ui/Panel.vue'
+import ServerSpoolmanStateSpool from '@/store/server/spoolman/types'
+import SpoolmanChangeSpoolDialog from '@/components/dialogs/SpoolmanChangeSpoolDialog.vue'
+import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
+import { mdiCloseThick, mdiDatabaseEdit, mdiSpeedometer, mdiRestart, mdiMinus, mdiPlus, mdiAdjust } from '@mdi/js'
+
+@Component({
+    components: { Panel, ConfirmationDialog, SpoolmanChangeSpoolDialog },
+})
+export default class MmuEditGateMapDialog extends Mixins(BaseMixin, MmuMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiDatabaseEdit = mdiDatabaseEdit
+    mdiSpeedometer = mdiSpeedometer
+    mdiRestart = mdiRestart
+    mdiMinus = mdiMinus
+    mdiPlus = mdiPlus
+    mdiAdjust = mdiAdjust
+
+    @Prop({ required: true }) declare readonly showDialog: boolean
+
+    editGateMap: MmuGateDetails[] | null = null
+    editGateSelected: number = -1
+
+    private showConfirmationDialog: boolean = false
+    private showSpoolmanSpoolChooserDialog: boolean = false
+
+    @Watch('gateMap')
+    onTtgMapChanged(): null {
+        this.initialize()
+    }
+
+    @Watch('showDialog')
+    onShowDialogChanged(): null {
+        this.initialize()
+    }
+
+    private initialize(): null {
+        if (this.showDialog) {
+            this.refreshSpoolmanData()
+            this.editGateMap = Array.from(this.gateMap)
+        } else {
+            this.editGateMap = null
+        }
+        this.editGateSelected = -1
+    }
+
+    private selectGate(gate: number): null {
+        if (this.editGateSelected !== -1) this.adjustSpoolId() // Get rid of null possibility
+        if (this.editGateSelected === gate) {
+            this.editGateSelected = -1
+        } else {
+            this.editGateSelected = gate
+
+            // Clean up stale spool_id's
+            if (this.spoolmanSupport === this.SPOOLMAN_OFF) {
+                this.editGateMap[this.editGateSelected].spoolId = -1
+            }
+        }
+    }
+
+    private handleEscapePress(event): null {
+        if (event.key === 'Escape' || event.keyCode === 27) {
+            this.editGateSelected = -1
+        }
+    }
+
+    private adjustName() {
+        const name = this.editGateMap[this.editGateSelected].filamentName.trim().replace(/[#'"]/g, '')
+        this.editGateMap[this.editGateSelected].filamentName = name
+    }
+
+    private adjustMaterial() {
+        const material = this.editGateMap[this.editGateSelected].material.trim().replace(/[#'"]/g, '')
+        this.editGateMap[this.editGateSelected].material = material
+    }
+
+    get selectedGateStatus(): boolean {
+        return (
+            this.editGateMap[this.editGateSelected].status === 1 || this.editGateMap[this.editGateSelected].status === 2
+        )
+    }
+
+    set selectedGateStatus(value: boolean) {
+        if (value) {
+            this.editGateMap[this.editGateSelected].status = this.GATE_AVAILABLE
+        } else {
+            this.editGateMap[this.editGateSelected].status = this.GATE_EMPTY
+        }
+    }
+
+    get useSpoolman(): boolean {
+        return (
+            this.editGateMap[this.editGateSelected].spoolId > 0 ||
+            this.editGateMap[this.editGateSelected].spoolId === null
+        )
+    }
+
+    set useSpoolman(newValue) {
+        if (!newValue) {
+            this.editGateMap[this.editGateSelected].spoolId = -1
+        } else {
+            this.editGateMap[this.editGateSelected].spoolId = null
+        }
+    }
+
+    private selectSpoolmanSpool(spool: ServerSpoolmanStateSpool) {
+        this.editGateMap[this.editGateSelected].spoolId = spool.id
+    }
+
+    private adjustSpoolId() {
+        const spoolId = this.editGateMap[this.editGateSelected].spoolId ?? -1
+        this.editGateMap[this.editGateSelected].spoolId = parseInt(spoolId)
+    }
+
+    private spoolIdRules() {
+        const spools: ServerSpoolmanStateSpool[] = this.$store.state.server.spoolman?.spools ?? []
+        return [
+            (sid: string | number) => {
+                const spoolId = parseInt(sid)
+                if (!spoolId || spoolId <= 0) return true
+                const spoolExists = spools.some((spool) => spool.id === spoolId) ?? null
+                return spoolExists ? true : this.$t('Panels.MmuPanel.GateMapDialog.NoMatchingSpool')
+            },
+        ]
+    }
+
+    get spoolIdExists(): boolean {
+        const spools: ServerSpoolmanStateSpool[] = this.$store.state.server.spoolman?.spools ?? []
+        return spools.some((spool) => spool.id === this.currentSpoolId)
+    }
+
+    get currentSpoolId(): number {
+        if (this.editGateMap) {
+            return parseInt(this.editGateMap[this.editGateSelected]?.spoolId ?? -1)
+        }
+        return -1
+    }
+
+    @Watch('currentSpoolId')
+    onCurrentSpoolIdChanged(newSpoolId): null {
+        if (newSpoolId > 0) {
+            const spool = this.spoolmanSpool(newSpoolId)
+            this.editGateMap[this.editGateSelected].filamentName =
+                spool?.filament?.name ?? this.$t('Panels.MmuPanel.Unknown')
+            this.editGateMap[this.editGateSelected].material =
+                spool?.filament?.material ?? this.$t('Panels.MmuPanel.Unknown')
+            let color = this.formColorString(spool?.filament?.color_hex)
+            this.editGateMap[this.editGateSelected].color = color
+            this.editGateMap[this.editGateSelected].temperature = spool?.filament?.settings_extruder_temp ?? -1
+        }
+    }
+
+    get spoolmanColor(): string {
+        const spoolId = parseInt(this.editGateMap[this.editGateSelected].spoolId)
+        const spool = this.spoolmanSpool(spoolId)
+        const color = spool?.filament.color_hex ?? '000'
+        return `#${color}`
+    }
+
+    get spoolmanRemainingWeight() {
+        const spoolId = parseInt(this.editGateMap[this.editGateSelected].spoolId)
+        const spool = this.spoolmanSpool(spoolId)
+        if (spool) {
+            const remaining = spool.remaining_weight ?? 0
+            return `${remaining.toFixed(0)}g`
+        }
+        return '-'
+    }
+
+    get spoolmanTotalWeight() {
+        const spoolId = parseInt(this.editGateMap[this.editGateSelected].spoolId)
+        const spool = this.spoolmanSpool(spoolId)
+        if (spool) {
+            let total = spool.initial_weight ?? spool.filament?.weight ?? 0
+            if (total < 1000) {
+                return `${total.toFixed(0)}g`
+            }
+
+            let totalRound = Math.round(total / 1000)
+            if (totalRound !== total / 1000) {
+                totalRound = Math.round(total / 100) / 10
+            }
+            return `${totalRound}kg`
+        }
+        return '-'
+    }
+
+    get spoolmanLastUsed() {
+        const spoolId = parseInt(this.editGateMap[this.editGateSelected].spoolId)
+        const spool = this.spoolmanSpool(spoolId)
+        let usedStr = '-'
+
+        if (spool) {
+            const last_used = spool.last_used ?? null
+            if (!last_used) {
+                usedStr = this.$t('Panels.SpoolmanPanel.Never')
+            } else {
+                const date = new Date(spool.last_used)
+                const now = new Date()
+                const diff = now.getTime() - date.getTime()
+
+                if (diff <= 1000 * 60 * 60 * 24) return this.$t('Panels.SpoolmanPanel.Today')
+                if (diff <= 1000 * 60 * 60 * 24 * 2) return this.$t('Panels.SpoolmanPanel.Yesterday')
+                if (diff <= 1000 * 60 * 60 * 24 * 14) {
+                    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+                    usedStr = this.$t('Panels.SpoolmanPanel.DaysAgo', { days })
+                }
+                usedStr = date.toLocaleDateString()
+            }
+        }
+        return `${this.$t('Panels.SpoolmanPanel.LastUsed')}: ${usedStr}`
+    }
+
+    temperatureRules = [
+        (v: string | number) => {
+            const num = parseFloat(String(v))
+            return !isNaN(num) && num >= 100 && num <= 290
+                ? true
+                : this.$t('Panels.MmuPanel.GateMapDialog.BadTemperature')
+        },
+    ]
+
+    private adjustTemperature() {
+        const temp = parseFloat(this.editGateMap[this.editGateSelected].temperature)
+        if (temp < 100) {
+            this.editGateMap[this.editGateSelected].temperature = 100
+        } else if (temp > 290) {
+            this.editGateMap[this.editGateSelected].temperature = 290
+        }
+    }
+
+    decrementSpeed(): void {
+        let value = this.editGateMap[this.editGateSelected].speedOverride
+        value = value > 10 ? Math.round(value - 10) : 10
+        this.editGateMap[this.editGateSelected].speedOverride = value
+    }
+
+    incrementSpeed(): void {
+        let value = this.editGateMap[this.editGateSelected].speedOverride
+        value = value < 150 ? Math.round(value + 10) : 150
+        this.editGateMap[this.editGateSelected].speedOverride = value
+    }
+
+    resetSpeed(): void {
+        this.editGateMap[this.editGateSelected].speedOverride = 100
+    }
+
+    // Actions...
+
+    resetGateMap() {
+        this.showConfirmationDialog = true
+    }
+
+    executeResetGateMap() {
+        this.initialize()
+        this.doLoadingSend('MMU_GATE_MAP RESET=1', 'mmu_gate_map')
+        this.showConfirmationDialog = false
+    }
+
+    close() {
+        this.editGateMap = null
+        this.editGateSelected = -1
+        this.$emit('close')
+    }
+
+    commit() {
+        if (this.editGateSelected !== -1) this.adjustSpoolId() // Get rid of null possibility
+        let mapStr = this.generateMapString(this.editGateMap)
+        let cmd = `MMU_GATE_MAP MAP="${mapStr}" QUIET=1`
+        this.doSend(cmd)
+        this.close()
+    }
+
+    private generateMapString(gateMap) {
+        const mapObject = {}
+        gateMap.forEach((gate) => {
+            mapObject[gate.index] = {
+                status: gate.status,
+                spool_id: gate.spoolId,
+                material: gate.material,
+                color: gate.color.replace(this.NO_FILAMENT_COLOR, '').replace('#', ''),
+                name: gate.filamentName,
+                temp: gate.temperature,
+                speed_override: gate.speedOverride,
+            }
+        })
+        const jsonString = JSON.stringify(mapObject)
+            .replace(/"(\d+)":/g, '$1: ')
+            .replace(/"/g, "'")
+        return jsonString
+    }
+
+    mounted() {
+        document.addEventListener('keydown', this.handleEscapePress)
+    }
+
+    beforeDestroy() {
+        document.removeEventListener('keydown', this.handleEscapePress)
+    }
+}
+</script>
+
+<style scoped>
+.small-font {
+    font-size: 0.8em;
+}
+
+.no-padding {
+    padding: 0px;
+}
+
+.no-spool {
+    opacity: 0.3;
+}
+
+.fixed-area {
+    min-height: 420px;
+    position: relative;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.overlay-text {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+}
+
+.short-switch {
+    padding-top: 0px;
+    margin-top: 0px;
+    margin-bottom: 2px;
+}
+
+.speed-slider-subheader {
+    height: auto;
+}
+
+._slider-input {
+    min-width: 5.2rem;
+    max-width: 5.2rem;
+    margin-left: 12px;
+}
+
+._slider-input >>> .v-input__slot {
+    min-height: 1rem !important;
+}
+
+._slider-input >>> .v-text-field__slot input {
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+._slider-input >>> .v-input__append-inner {
+    margin: auto -5px auto 0 !important;
+}
+
+.spoolman-btn {
+    width: 160px;
+    overflow: hidden;
+    font-size: 0.8em;
+}
+.spoolman-btn .v-icon {
+    margin-right: 4px;
+}
+</style>
diff --git a/src/components/dialogs/MmuEditTtgMapDialog.vue b/src/components/dialogs/MmuEditTtgMapDialog.vue
new file mode 100644
index 000000000..3ffa8ee10
--- /dev/null
+++ b/src/components/dialogs/MmuEditTtgMapDialog.vue
@@ -0,0 +1,616 @@
+<template>
+    <div>
+        <v-dialog v-model="showDialog" width="800" persistent :fullscreen="isMobile">
+            <panel
+                :title="$t('Panels.MmuPanel.EditTtgMap')"
+                :icon="mdiStateMachine"
+                card-class="mmu-edit-ttg-map-dialog">
+                <template #buttons>
+                    <v-btn icon tile @click="close">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+
+                <!-- UPPER SECTION -->
+                <v-card-subtitle>
+                    <v-container fluid>
+                        <!-- HEADER -->
+                        <v-row>
+                            <v-col cols="8" class="d-flex justify-start align-center no-padding">
+                                <span v-if="allTools">{{ $t('Panels.MmuPanel.TtgMapDialog.MapTools') }}</span>
+                                <span v-else>{{ $t('Panels.MmuPanel.TtgMapDialog.MapSlicerTools') }}</span>
+                            </v-col>
+                            <v-col cols="4" class="d-flex justify-end align-center no-padding pr-10">
+                                <v-switch
+                                    v-model="allTools"
+                                    :disabled="allToolsDisabled"
+                                    :label="$t('Panels.MmuPanel.TtgMapDialog.AllTools')"
+                                    hide-details
+                                    class="short-switch"></v-switch>
+                            </v-col>
+                        </v-row>
+
+                        <!-- DISPLAY TOOLS -->
+                        <v-row>
+                            <v-col :cols="isMobile ? 12 : 9">
+                                <v-row>
+                                    <template v-for="(g, t) in localTtgMap">
+                                        <v-col
+                                            v-if="toolMetaData[t].inUse || allTools"
+                                            :key="t"
+                                            cols="1"
+                                            class="no-padding min-width-card">
+                                            <v-card :class="toolCardClass(t)" @click="selectTool(t)">
+                                                <v-card-title class="justify-center">{{ toolText(t) }}</v-card-title>
+                                                <v-card-text>
+                                                    <v-container>
+                                                        <v-row>
+                                                            <v-col cols="5" class="no-padding">
+                                                                <mmu-spool
+                                                                    :gate-index="g"
+                                                                    :show-percent="false"
+                                                                    width="100%" />
+                                                            </v-col>
+                                                            <v-col
+                                                                cols="7"
+                                                                class="d-flex flex-column no-padding pr-1 pt-2">
+                                                                <div class="small-font text-center">Gate</div>
+                                                                <div class="text-center">#{{ g }}</div>
+                                                                <v-spacer />
+                                                                <v-divider />
+                                                                <div class="text-start no-break">
+                                                                    <strong>&infin;&nbsp;</strong>
+                                                                    <span class="tiny-font">{{ esSpoolsText(g) }}</span>
+                                                                </div>
+                                                            </v-col>
+                                                        </v-row>
+                                                    </v-container>
+                                                </v-card-text>
+                                            </v-card>
+                                        </v-col>
+                                    </template>
+                                </v-row>
+                            </v-col>
+
+                            <!-- TTG MAP -->
+                            <v-col
+                                :cols="isMobile ? 6 : 3"
+                                class="d-flex flex-column align-center justify-center pa-0 min-width-map">
+                                <mmu-ttg-map
+                                    :map="localTtgMap"
+                                    :groups="localEndlessSpoolGroups"
+                                    :selected-tool="selectedTool"
+                                    :selected-gate="selectedGate" />
+                                <v-btn
+                                    small
+                                    color="secondary"
+                                    class="small-font"
+                                    :loading="loadings.includes('mmu_ttg_map')"
+                                    @click="resetTtgMap()">
+                                    {{ $t('Panels.MmuPanel.TtgMapDialog.Reset') }}
+                                </v-btn>
+                            </v-col>
+                        </v-row>
+                    </v-container>
+                </v-card-subtitle>
+
+                <v-divider />
+
+                <!-- LOWER SECTION -->
+                <v-card-text class="px-4 pb-4">
+                    <div class="fixed-area">
+                        <transition name="fade">
+                            <div v-if="selectedTool === -1" class="overlay-text">
+                                {{ $t('Panels.MmuPanel.TtgMapDialog.SelectTool') }}
+                            </div>
+                        </transition>
+
+                        <transition name="fade">
+                            <v-container v-if="selectedTool !== -1">
+                                <v-row>
+                                    <!-- SLICER TOOL -->
+                                    <v-col cols="4" class="d-flex align-center justify-center">
+                                        <v-list-item v-if="selectedTool !== -1">
+                                            <v-list-item-content
+                                                v-if="
+                                                    toolMetaData[selectedTool] && referencedTools.includes(selectedTool)
+                                                ">
+                                                <div class="text-overline">
+                                                    {{ $t('Panels.MmuPanel.TtgMapDialog.SlicerExpects') }}
+                                                </div>
+                                                <v-divider />
+                                                <div class="mb-2 mt-2">
+                                                    <span
+                                                        class="tool-swatch mr-1"
+                                                        :style="'background-color: ' + toolColor" />
+                                                    {{ toolText(selectedTool) }}
+                                                </div>
+                                                <v-list-item-title class="wrap-tool-name">
+                                                    {{ toolNameText }}
+                                                </v-list-item-title>
+                                                <v-list-item-subtitle>
+                                                    {{ toolDetailsText }}
+                                                </v-list-item-subtitle>
+                                                <div style="height: 100px">
+                                                    <v-alert
+                                                        v-if="alerts"
+                                                        text
+                                                        dense
+                                                        color="warning"
+                                                        class="mt-4 mx-0 pl-2 pr-2 alert-text">
+                                                        <div v-for="alert in alerts" :key="alert">
+                                                            {{ alert }}
+                                                        </div>
+                                                    </v-alert>
+                                                </div>
+                                            </v-list-item-content>
+                                            <v-list-item-content v-else>
+                                                <v-list-item-subtitle class="wrap-tool-name">
+                                                    <div
+                                                        v-if="toolMetaData[selectedTool] || referencedTools.length > 0">
+                                                        {{
+                                                            $t('Panels.MmuPanel.TtgMapDialog.ToolNotUsed', {
+                                                                tool: toolText(selectedTool),
+                                                            })
+                                                        }}
+                                                    </div>
+                                                    <div v-else>
+                                                        {{
+                                                            $t('Panels.MmuPanel.TtgMapDialog.NoSlicerInfo', {
+                                                                tool: toolText(selectedTool),
+                                                            })
+                                                        }}
+                                                    </div>
+                                                </v-list-item-subtitle>
+                                            </v-list-item-content>
+                                        </v-list-item>
+                                    </v-col>
+
+                                    <v-col cols="1" class="d-flex justify-start align-center">
+                                        <div v-if="selectedTool !== -1" class="triangle"></div>
+                                    </v-col>
+
+                                    <!-- GATE CHOOSER -->
+                                    <v-col cols="7" class="drop-down-table">
+                                        <v-data-table
+                                            :headers="gateTableHeaders"
+                                            :items="gateItems"
+                                            item-key="index"
+                                            sort-by="index"
+                                            :items-per-page="-1"
+                                            hide-default-footer>
+                                            <template #no-data>
+                                                <div class="text-center">
+                                                    {{ $t('Panels.MmuPanel.TtgMapDialog.NoGateData') }}
+                                                </div>
+                                            </template>
+
+                                            <template #item="{ item }">
+                                                <mmu-gate-dialog-row
+                                                    :key="item.index"
+                                                    :ref="`row-${item.index}`"
+                                                    :details="item"
+                                                    :selected-es-group="localEndlessSpoolGroups[selectedGate] ?? null"
+                                                    :selected-gate="selectedGate ?? null"
+                                                    @select-gate="selectGate" />
+                                            </template>
+                                        </v-data-table>
+                                    </v-col>
+                                </v-row>
+                            </v-container>
+                        </transition>
+                    </div>
+                </v-card-text>
+
+                <v-card-actions>
+                    <v-spacer />
+                    <v-btn text @click="close">{{ $t('Panels.MmuPanel.Cancel') }}</v-btn>
+                    <v-btn color="primary" text @click="commit">
+                        {{ $t('Panels.MmuPanel.Ok') }}
+                    </v-btn>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
+
+        <!-- CONFIRMATION FOR RESET ACTION -->
+        <confirmation-dialog
+            :show="showConfirmationDialog"
+            :title="$t('Panels.MmuPanel.Dialog.AreYouSure')"
+            :text="$t('Panels.MmuPanel.TtgMapDialog.ResetConfirmation')"
+            :action-button-text="$t('Panels.MmuPanel.TtgMapDialog.Reset')"
+            :cancel-button-text="$t('Panels.MmuPanel.Cancel')"
+            @action="executeResetTtgMap"
+            @close="showConfirmationDialog = false" />
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+import Panel from '@/components/ui/Panel.vue'
+import Vue from 'vue'
+import { FileStateGcodefile } from '@/store/files/types'
+import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
+import { mdiCloseThick, mdiStateMachine } from '@mdi/js'
+
+@Component({
+    components: { Panel, ConfirmationDialog },
+})
+export default class MmuEditTtgMapDialog extends Mixins(BaseMixin, MmuMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiStateMachine = mdiStateMachine
+
+    @Prop({ required: true }) declare readonly showDialog: boolean
+    @Prop({ required: false, default: null }) declare readonly file!: FileStateGcodefile | null
+
+    private localTtgMap: number[] = []
+    private localEndlessSpoolGroups: number[] = []
+    private toolMetaData: object[] = []
+    private referencedTools: number[] = []
+    private allTools: boolean = true
+    private allToolsDisabled: boolean = false
+
+    private selectedTool: number = -1
+    private selectedGate: number = -1
+
+    private showConfirmationDialog: boolean = false
+
+    @Watch('ttgMap')
+    onTtgMapChanged(): void {
+        this.initialize()
+    }
+
+    @Watch('endlessSpoolGroups')
+    onEndlessSpoolGroupsChanged(): void {
+        this.initialize()
+    }
+
+    @Watch('showDialog')
+    onShowDialogChanged(): void {
+        this.initialize()
+    }
+
+    private initialize(): null {
+        if (this.showDialog) {
+            this.localTtgMap = Array.from(this.ttgMap)
+            this.localEndlessSpoolGroups = Array.from(this.endlessSpoolGroups)
+
+            // Form tool meta data either from gcode file if starting print or from Happy Hare
+            // slicer tool map after print start (should be the same info!)
+
+            this.toolMetaData = []
+            this.referencedTools = []
+            for (let i = 0; i < this.ttgMap.length; i++) {
+                this.toolMetaData[i] = this.toolDetails(i, this.file)
+                if (this.toolMetaData[i]?.inUse) this.referencedTools.push(i)
+            }
+
+            if (this.referencedTools.length > 0) {
+                this.allTools = false
+                this.allToolsDisabled = false
+            } else {
+                this.allTools = true
+                this.allToolsDisabled = true
+            }
+            this.selectedTool = -1
+            this.selectedGate = -1
+        }
+    }
+
+    @Watch('allTools')
+    onAllToolsChanged(): void {
+        this.selectedTool = -1
+        this.selectedGate = -1
+    }
+
+    private toolCardClass(tool: number): string[] {
+        let classes = []
+        classes.push('no-padding')
+        classes.push(this.$vuetify.theme.dark ? 'card-dark-theme' : 'card-light-theme')
+        if (this.selectedTool === tool) classes.push('selected-card')
+        if (this.selectedTool !== tool && this.selectedTool >= 0) classes.push('disabled-card')
+        return classes
+    }
+
+    get gateItems() {
+        if (this.selectedTool < 0) return []
+        return this.gateMap
+    }
+
+    get gateTableHeaders() {
+        if (this.selectedTool < 0) return []
+        return [
+            {
+                text: this.$t('Panels.MmuPanel.TtgMapDialog.Gate'),
+                align: 'start',
+                value: 'index',
+                sortable: false,
+            },
+            {
+                text: '',
+                align: 'center',
+                sortable: false,
+            },
+            {
+                text: this.$t('Panels.MmuPanel.TtgMapDialog.FilamentInfo'),
+                align: 'start',
+                sortable: false,
+            },
+            {
+                text: this.$t('Panels.MmuPanel.TtgMapDialog.EndlessSpool'),
+                align: 'center',
+                sortable: false,
+            },
+        ]
+    }
+
+    private selectTool(tool: number): string {
+        if (this.selectedTool === tool) {
+            this.selectedTool = -1
+            this.selectedGate = -1
+        } else {
+            this.selectedTool = tool
+            this.selectedGate = this.localTtgMap[tool]
+            this.scrollToGateRow(this.selectedGate)
+        }
+    }
+
+    private selectGate(gate) {
+        this.selectedGate = gate
+        Vue.set(this.localTtgMap, this.selectedTool, gate)
+    }
+
+    private scrollToGateRow(gate) {
+        this.$nextTick(() => {
+            const targetRow = this.$refs[`row-${gate}`]
+            if (targetRow) {
+                targetRow.$el.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+            }
+        })
+    }
+
+    private handleEscapePress(event) {
+        if (event.key === 'Escape' || event.keyCode === 27) {
+            this.selectedTool = -1
+            this.selectedGate = -1
+        }
+    }
+
+    private esSpoolsText(gate: number): string {
+        let esGates = []
+        let group = this.localEndlessSpoolGroups[gate]
+        this.localEndlessSpoolGroups.forEach((g, index) => {
+            let cIndex = (gate + index) % this.localEndlessSpoolGroups.length
+            if (this.localEndlessSpoolGroups[cIndex] === group && cIndex !== gate) {
+                esGates.push(cIndex)
+            }
+        })
+        if (esGates.length) return esGates.join(',')
+        return 'none'
+    }
+
+    // Slicer tool...
+
+    get toolNameText(): string {
+        return this.toolMetaData[this.selectedTool].name
+    }
+
+    get toolDetailsText(): string {
+        let toolMaterialText = this.toolMetaData[this.selectedTool].material
+        let toolTempText = null
+        if (this.toolMetaData[this.selectedTool].temp >= 0) {
+            toolTempText = this.toolMetaData[this.selectedTool].temp + '\u00B0' + 'C'
+        }
+        return [toolMaterialText, toolTempText].filter((v) => v !== null).join(' | ')
+    }
+
+    get toolColor(): string {
+        return this.toolMetaData[this.selectedTool].color
+    }
+
+    get alerts(): string[] | null {
+        const maxTempDiff = 5
+        const maxColorDiff = 16000
+        let alerts = []
+
+        if (
+            this.toolMetaData[this.selectedTool].material.toUpperCase() !==
+            this.gateDetails(this.selectedGate).material.toUpperCase()
+        ) {
+            alerts.push('\u2022 ' + this.$t('Panels.MmuPanel.TtgMapDialog.Material'))
+        }
+
+        if (
+            Math.abs(this.toolMetaData[this.selectedTool].temp - this.gateDetails(this.selectedGate).temperature) >
+            maxTempDiff
+        ) {
+            alerts.push('\u2022 ' + this.$t('Panels.MmuPanel.TtgMapDialog.Temperature'))
+        }
+
+        const rgb1 = this.hexToRgb(this.formColorString(this.toolMetaData[this.selectedTool].color))
+        const rgb2 = this.hexToRgb(this.formColorString(this.gateDetails(this.selectedGate).color))
+        const colorDifference = this.weightedEuclideanDistance(rgb1, rgb2)
+        if (colorDifference > maxColorDiff) {
+            alerts.push('\u2022 ' + this.$t('Panels.MmuPanel.TtgMapDialog.Color'))
+        }
+
+        if (alerts.length > 0) {
+            alerts.unshift(this.$t('Panels.MmuPanel.TtgMapDialog.Mismatch'))
+            return alerts
+        }
+        return null
+    }
+
+    private hexToRgb(hex: string): number[] {
+        const r = parseInt(hex.slice(1, 3), 16)
+        const g = parseInt(hex.slice(3, 5), 16)
+        const b = parseInt(hex.slice(5, 7), 16)
+        return [r, g, b]
+    }
+
+    private weightedEuclideanDistance(
+        color1: number[],
+        color2: number[],
+        weights: number[] = [0.3, 0.59, 0.11]
+    ): number {
+        return color1.reduce((acc, curr, i) => acc + weights[i] * (curr - color2[i]) ** 2, 0)
+    }
+
+    // Actions...
+
+    resetTtgMap() {
+        this.showConfirmationDialog = true
+    }
+
+    executeResetTtgMap() {
+        this.initialize()
+        this.doLoadingSend('MMU_TTG_MAP RESET=1', 'mmu_ttg_map')
+        this.showConfirmationDialog = false
+    }
+
+    close() {
+        this.selectedTool = -1
+        this.selectedGate = -1
+        this.$emit('close')
+    }
+
+    commit() {
+        let mapStr = this.localTtgMap.join(',')
+        let esGrpStr = this.localEndlessSpoolGroups.join(',')
+        let cmd = `MMU_TTG_MAP MAP="${mapStr}"`
+        this.doSend(cmd)
+        cmd = `MMU_ENDLESS_SPOOL GROUPS="${esGrpStr}"`
+        this.doSend(cmd)
+        this.close()
+    }
+
+    mounted() {
+        document.addEventListener('keydown', this.handleEscapePress)
+    }
+
+    beforeDestroy() {
+        document.removeEventListener('keydown', this.handleEscapePress)
+    }
+}
+</script>
+
+<style scoped>
+.card-light-theme {
+    background: #f0f0f0;
+}
+
+.card-dark-theme {
+    background: #2c2c2c;
+}
+
+.selected-card {
+    background: #595959 !important;
+}
+
+.disabled-card {
+    opacity: 0.5;
+}
+
+.small-font {
+    font-size: 0.8em;
+}
+
+.tiny-font {
+    font-size: 0.8em;
+    line-height: 0.8em;
+}
+
+.no-break {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.no-padding {
+    padding: 3px;
+}
+
+.min-width-card {
+    min-width: 96px;
+}
+
+.min-width-map {
+    min-width: 180px;
+}
+
+.no-padding .v-card__title,
+.no-padding .v-card__subtitle,
+.no-padding .v-card__text {
+    padding: 0px;
+    line-height: 1em;
+}
+
+.short-switch {
+    padding-top: 0px;
+    margin-top: 0px;
+    margin-bottom: 2px;
+}
+
+.scrollable-table {
+    overflow-y: auto;
+}
+
+.fixed-area {
+    height: 300px;
+    position: relative;
+}
+
+.drop-down-table {
+    height: 300px;
+    overflow-y: auto;
+}
+
+.wrap-tool-name {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+}
+
+.tool-swatch {
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    border: 1px solid lightgray;
+    vertical-align: middle;
+}
+
+.triangle {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 40px 0 40px 15px;
+    border-color: transparent transparent transparent #595959;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.overlay-text {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+}
+
+.alert-text {
+    font-size: 1em;
+}
+</style>
diff --git a/src/components/dialogs/MmuGateDialogRow.vue b/src/components/dialogs/MmuGateDialogRow.vue
new file mode 100644
index 000000000..eef589241
--- /dev/null
+++ b/src/components/dialogs/MmuGateDialogRow.vue
@@ -0,0 +1,68 @@
+<template>
+    <tr
+        :class="rowClass"
+        @click="$emit('select-gate', details.index)"
+        @mouseover="$emit('mouseover', details.index)"
+        @mouseleave="$emit('mouseleave', details.index)">
+        <td>{{ details.index }}</td>
+        <td class="pr-0 py-2">
+            <mmu-spool
+                :gate-index="details.index"
+                :show-percent="false"
+                style="height: 60px; float: left"
+                class="mr-0" />
+        </td>
+        <td class="py-0" style="min-width: 274px; max-width: 274px">
+            <mmu-gate-summary :gate-index="details.index" :show-details="true" :show-gate="false" :compact="true" />
+        </td>
+        <td>
+            <span
+                class="es-group-icon"
+                :style="{ background: details.endlessSpoolGroup === selectedEsGroup ? 'limegreen' : 'none' }" />
+        </td>
+    </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 MmuMixin from '@/components/mixins/mmu'
+
+@Component({})
+export default class MmuGateDialogRow extends Mixins(BaseMixin, MmuMixin) {
+    @Prop({ required: true }) declare readonly details: MmuGateDetails
+    @Prop({ required: true }) declare readonly selectedGate: number | null
+    @Prop({ required: true }) declare readonly selectedEsGroup: number | null
+
+    get rowClass(): string[] {
+        let classes = ['cursor-pointer']
+        if (this.details.index === this.selectedGate) classes.push('selected-row')
+        if (this.details.status === this.GATE_EMPTY) classes.push('disabled-row')
+        return classes
+    }
+}
+</script>
+
+<style scoped>
+.v-data-table__table {
+    table-layout: fixed;
+}
+
+.selected-row {
+    background: #595959;
+}
+
+.disabled-row {
+    opacity: 0.7;
+}
+
+.es-group-icon {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 25%;
+    border: 1px solid var(--v-secondary-lighten3);
+    vertical-align: middle;
+}
+</style>
diff --git a/src/components/dialogs/MmuMaintenanceDialog.vue b/src/components/dialogs/MmuMaintenanceDialog.vue
new file mode 100644
index 000000000..6d92bedf0
--- /dev/null
+++ b/src/components/dialogs/MmuMaintenanceDialog.vue
@@ -0,0 +1,504 @@
+<template>
+    <v-dialog v-model="showDialog" width="600" persistent :fullscreen="isMobile">
+        <panel :title="$t('Panels.MmuPanel.MmuMaintenance')" :icon="mdiWrenchCog" card-class="mmu-edit-ttg-map-dialog">
+            <template #buttons>
+                <v-btn icon tile @click="close">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+
+            <v-card-subtitle>
+                {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Intro') }}
+            </v-card-subtitle>
+
+            <v-card-text>
+                <v-row dense>
+                    <v-col class="col-6 d-flex justify-center align-center">
+                        <span class="settings-row-title">
+                            {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.MotorSync') }}
+                        </span>
+                    </v-col>
+                    <v-col class="col-3 d-flex justify-center">
+                        <v-btn
+                            block
+                            small
+                            :disabled="!canSend || syncDrive"
+                            class="btn-small-text"
+                            color="secondary"
+                            @click="doLoadingSend('MMU_SYNC_GEAR_MOTOR SYNC=1', 'mmu_sync_gear_motor')">
+                            <v-icon left>{{ mdiSync }}</v-icon>
+                            {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Sync') }}
+                        </v-btn>
+                    </v-col>
+                    <v-col class="col-3 d-flex justify-center">
+                        <v-btn
+                            block
+                            small
+                            :disabled="!canSend || !syncDrive"
+                            class="btn-small-text"
+                            color="secondary"
+                            @click="doLoadingSend('MMU_SYNC_GEAR_MOTOR SYNC=0', 'mmu_sync_gear_motor')">
+                            <v-icon left>{{ mdiSyncOff }}</v-icon>
+                            {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Unsync') }}
+                        </v-btn>
+                    </v-col>
+                </v-row>
+                <v-row dense>
+                    <v-col class="col-6 d-flex justify-center align-center">
+                        <span class="settings-row-title">
+                            {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.ExtruderOnly') }}
+                        </span>
+                    </v-col>
+                    <v-col class="col-3 d-flex justify-center">
+                        <v-btn
+                            block
+                            small
+                            :disabled="!canSend"
+                            class="btn-small-text"
+                            color="secondary"
+                            @click="doLoadingSend('MMU_LOAD EXTRUDER_ONLY=1', 'mmu_load')">
+                            <v-icon left>{{ mdiDownloadOutline }}</v-icon>
+                            {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Load') }}
+                        </v-btn>
+                    </v-col>
+                    <v-col class="col-3 d-flex justify-center">
+                        <v-btn
+                            block
+                            small
+                            :disabled="!canSend"
+                            class="btn-small-text"
+                            color="secondary"
+                            @click="doLoadingSend('MMU_UNLOAD EXTRUDER_ONLY=1', 'mmu_unload')">
+                            <v-icon left>{{ mdiUploadOutline }}</v-icon>
+                            {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Unload') }}
+                        </v-btn>
+                    </v-col>
+                </v-row>
+
+                <v-row dense>
+                    <v-col class="col-6 d-flex justify-center">
+                        <span class="settings-row-title">
+                            {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.MmuMotors') }}
+                        </span>
+                    </v-col>
+                    <v-col class="col-3 d-flex justify-center">
+                        <v-btn
+                            block
+                            small
+                            :disabled="!canSend"
+                            class="btn-small-text"
+                            color="secondary"
+                            @click="doLoadingSend('MMU_MOTORS_ON', 'mmu_motors_on')">
+                            <v-icon left>{{ mdiEngineOutline }}</v-icon>
+                            {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.On') }}
+                        </v-btn>
+                    </v-col>
+                    <v-col class="col-3 d-flex justify-center">
+                        <v-btn
+                            block
+                            small
+                            :disabled="!canSend"
+                            class="btn-small-text"
+                            color="secondary"
+                            @click="doLoadingSend('MMU_MOTORS_OFF', 'mmu_motors_off')">
+                            <v-icon left>{{ mdiEngineOffOutline }}</v-icon>
+                            {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Off') }}
+                        </v-btn>
+                    </v-col>
+                </v-row>
+
+                <!-- PER MMU UNIT CUSTOM CONTROLS -->
+                <div v-for="index in unitArray" :key="'unit_' + index">
+                    <v-row dense>
+                        <v-col cols="12" class="pt-6">
+                            <span class="settings-row-subtitle">{{ unitDisplayName(index) }}</span>
+                            <v-divider class="mb-1" />
+                        </v-col>
+                    </v-row>
+
+                    <v-row v-if="['RotarySelector', 'ServoSelector'].includes(unitDetails(index).selectorType)" dense>
+                        <v-col cols="3" class="d-flex align-center">
+                            <span class="settings-row-title">
+                                {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Selector') }}
+                            </span>
+                        </v-col>
+                        <v-col class="col-9">
+                            <v-row dense>
+                                <v-col cols="4" class="d-flex align-center">
+                                    <v-btn
+                                        block
+                                        small
+                                        :disabled="!canSend"
+                                        class="btn-small-text"
+                                        color="secondary"
+                                        @click="doLoadingSend('MMU_HOME', 'mmu_home')">
+                                        <v-icon left>{{ mdiHomeOutline }}</v-icon>
+                                        {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Home') }}
+                                    </v-btn>
+                                </v-col>
+                            </v-row>
+                            <v-row dense>
+                                <v-col class="col-4 d-flex justify-center">
+                                    <v-btn
+                                        block
+                                        small
+                                        :disabled="!canSend || grip === 'Gripped'"
+                                        class="btn-small-text"
+                                        color="secondary"
+                                        @click="doLoadingSend('MMU_GRIP', 'mmu_grip')">
+                                        <v-icon left>{{ mdiArrowCollapseHorizontal }}</v-icon>
+                                        {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Grip') }}
+                                    </v-btn>
+                                </v-col>
+                                <v-col class="col-4 d-flex justify-center">
+                                    <v-btn
+                                        block
+                                        small
+                                        :disabled="!canSend || grip === 'Released'"
+                                        class="btn-small-text"
+                                        color="secondary"
+                                        @click="doLoadingSend('MMU_RELEASE', 'mmu_release')">
+                                        <v-icon left>{{ mdiArrowExpandHorizontal }}</v-icon>
+                                        {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Release') }}
+                                    </v-btn>
+                                </v-col>
+                            </v-row>
+                        </v-col>
+                    </v-row>
+
+                    <v-row v-else-if="['LinearSelector'].includes(unitDetails(index).selectorType)" dense>
+                        <v-col cols="3" class="d-flex align-center">
+                            <span class="settings-row-title">
+                                {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Selector') }}
+                            </span>
+                        </v-col>
+                        <v-col class="col-9">
+                            <v-row dense>
+                                <v-col cols="4" class="d-flex align-center">
+                                    <v-btn
+                                        block
+                                        small
+                                        :disabled="!canSend"
+                                        class="btn-small-text"
+                                        color="secondary"
+                                        @click="doLoadingSend('MMU_HOME', 'mmu_home')">
+                                        <v-icon left>{{ mdiHomeOutline }}</v-icon>
+                                        {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Home') }}
+                                    </v-btn>
+                                </v-col>
+                            </v-row>
+                            <v-row dense>
+                                <v-col class="col-4 d-flex justify-center">
+                                    <v-btn
+                                        block
+                                        small
+                                        :disabled="!canSend || servo === 'Up'"
+                                        class="btn-small-text"
+                                        color="secondary"
+                                        @click="doLoadingSend('MMU_SERVO POS=up', 'mmu_servo')">
+                                        <v-icon left>{{ mdiArrowUpThin }}</v-icon>
+                                        {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Up') }}
+                                    </v-btn>
+                                </v-col>
+                                <v-col class="col-4 d-flex justify-center">
+                                    <v-btn
+                                        block
+                                        small
+                                        :disabled="!canSend || servo === 'Down'"
+                                        class="btn-small-text"
+                                        color="secondary"
+                                        @click="doLoadingSend('MMU_SERVO POS=down', 'mmu_servo')">
+                                        <v-icon left>{{ mdiArrowDownThin }}</v-icon>
+                                        {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Down') }}
+                                    </v-btn>
+                                </v-col>
+                                <v-col class="col-4 d-flex justify-center">
+                                    <v-btn
+                                        block
+                                        small
+                                        :disabled="!canSend || servo === 'Move'"
+                                        class="btn-small-text"
+                                        color="secondary"
+                                        @click="doLoadingSend('MMU_SERVO POS=move', 'mmu_servo')">
+                                        <v-icon left>{{ mdiArrowLeftRight }}</v-icon>
+                                        {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Move') }}
+                                    </v-btn>
+                                </v-col>
+                            </v-row>
+                        </v-col>
+                    </v-row>
+
+                    <v-row v-else dense>
+                        <v-col cols="3" class="d-flex align-center">
+                            <span class="settings-row-subtitle">
+                                {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.NoCustomControls') }}
+                            </span>
+                        </v-col>
+                    </v-row>
+                </div>
+
+                <v-row dense>
+                    <v-col cols="12" class="pt-10">
+                        <span class="settings-row-subtitle">
+                            {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Config') }}
+                        </span>
+                        <v-divider class="mb-6 mt-1" />
+                    </v-col>
+                </v-row>
+
+                <v-row dense>
+                    <v-col cols="3" class="d-flex align-center">
+                        <v-col class="d-flex flex-column pa-0 my-3">
+                            <span class="settings-row-title">
+                                {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.Leds') }}
+                            </span>
+                            <v-switch
+                                v-model="localLedEnable"
+                                :disabled="!mmuLeds"
+                                :label="$t('Panels.MmuPanel.MmuMaintenanceDialog.Enable')"
+                                hide-details
+                                class="short-switch" />
+                            <v-switch
+                                v-model="localLedAnimation"
+                                :disabled="!ledEffectModule"
+                                :label="$t('Panels.MmuPanel.MmuMaintenanceDialog.Animation')"
+                                hide-details
+                                class="short-switch" />
+                        </v-col>
+                    </v-col>
+                    <v-col cols="7">
+                        <v-row dense :class="{ 'disabled-row': !hasLedsOfType('entry') }">
+                            <v-col class="col-4 d-flex justify-end align-center pr-6">Entry</v-col>
+                            <v-col class="col-8 d-flex align-center">
+                                <v-select
+                                    v-model="localEntryEffect"
+                                    :items="LED_OPTIONS"
+                                    :disabled="!hasLedsOfType('entry')"
+                                    hide-details
+                                    outlined
+                                    dense />
+                            </v-col>
+                        </v-row>
+                        <v-row dense :class="{ 'disabled-row': !hasLedsOfType('exit') }">
+                            <v-col class="col-4 d-flex justify-end align-center pr-6">Exit</v-col>
+                            <v-col class="col-8 d-flex align-center">
+                                <v-select
+                                    v-model="localExitEffect"
+                                    :items="LED_OPTIONS"
+                                    :disabled="!hasLedsOfType('exit')"
+                                    hide-details
+                                    outlined
+                                    dense />
+                            </v-col>
+                        </v-row>
+                        <v-row dense :class="{ 'disabled-row': !hasLedsOfType('status') }">
+                            <v-col class="col-4 d-flex justify-end align-center pr-6">Status</v-col>
+                            <v-col class="col-8 d-flex align-center">
+                                <v-select
+                                    v-model="localStatusEffect"
+                                    :items="LED_STATUS_OPTIONS"
+                                    :disabled="!hasLedsOfType('status')"
+                                    hide-details
+                                    outlined
+                                    dense />
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                    <v-col cols="2" class="d-flex align-center justify-center">
+                        <v-btn class="btn-no-text" color="secondary" :disabled="!canSend" @click="updateLeds">
+                            <v-icon>{{ mdiContentSaveSettingsOutline }}</v-icon>
+                        </v-btn>
+                    </v-col>
+                </v-row>
+
+                <v-row dense class="mt-4">
+                    <v-col cols="3" class="d-flex align-center">
+                        <span class="settings-row-title">
+                            {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.UiVisual') }}
+                        </span>
+                    </v-col>
+                    <v-col cols="7">
+                        <v-row dense>
+                            <v-col class="col-4 d-flex justify-end align-center pr-6">
+                                {{ $t('Panels.MmuPanel.MmuMaintenanceDialog.ExtruderTx') }}
+                            </v-col>
+                            <v-col class="col-8 d-flex align-center">
+                                <v-select
+                                    v-model="localTMacroColor"
+                                    :items="T_MACRO_COLOR_OPTIONS"
+                                    hide-details
+                                    outlined
+                                    dense />
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer />
+                <v-btn color="primary" text @click="close">
+                    {{ $t('Panels.MmuPanel.Ok') }}
+                </v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+import Panel from '@/components/ui/Panel.vue'
+import {
+    mdiCloseThick,
+    mdiWrenchCog,
+    mdiSync,
+    mdiSyncOff,
+    mdiDownloadOutline,
+    mdiUploadOutline,
+    mdiEngineOutline,
+    mdiEngineOffOutline,
+    mdiHomeOutline,
+    mdiArrowDownThin,
+    mdiArrowUpThin,
+    mdiArrowLeftRight,
+    mdiArrowCollapseHorizontal,
+    mdiArrowExpandHorizontal,
+    mdiContentSaveSettingsOutline,
+} from '@mdi/js'
+
+@Component({
+    components: { Panel },
+})
+export default class MmuMaintainanceStateDialog extends Mixins(BaseMixin, MmuMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiWrenchCog = mdiWrenchCog
+    mdiSync = mdiSync
+    mdiSyncOff = mdiSyncOff
+    mdiDownloadOutline = mdiDownloadOutline
+    mdiUploadOutline = mdiUploadOutline
+    mdiEngineOutline = mdiEngineOutline
+    mdiEngineOffOutline = mdiEngineOffOutline
+    mdiHomeOutline = mdiHomeOutline
+    mdiArrowDownThin = mdiArrowDownThin
+    mdiArrowUpThin = mdiArrowUpThin
+    mdiArrowLeftRight = mdiArrowLeftRight
+    mdiArrowCollapseHorizontal = mdiArrowCollapseHorizontal
+    mdiArrowExpandHorizontal = mdiArrowExpandHorizontal
+    mdiContentSaveSettingsOutline = mdiContentSaveSettingsOutline
+
+    @Prop({ required: true }) readonly showDialog!: boolean
+
+    private localLedEnable: boolean = true
+    private localLedAnimation: boolean = true
+    private localEntryEffect: string = 'off'
+    private localExitEffect: string = 'off'
+    private localStatusEffect: string = 'off'
+    private localTMacroColor: string = 'slicer'
+
+    @Watch('showDialog')
+    onShowDialogChanged(newValue: boolean): void {
+        if (newValue) {
+            this.localLedEnable = this.macroVarsLedEnable
+            this.localLedAnimation = this.macroVarsLedAnimation
+            this.localEntryEffect = this.macroVarsDefaultEntryEffect
+            this.localExitEffect = this.macroVarsDefaultExitEffect
+            this.localStatusEffect = this.macroVarsDefaultStatusEffect
+            this.localTMacroColor = this.configTMacroColor
+        }
+    }
+
+    get unitArray(): number[] {
+        return Array.from({ length: this.numUnits }, (_, k) => k)
+    }
+
+    get mmuLeds(): boolean {
+        return !!this.$store.state.printer.mmu_leds
+    }
+
+    private hasLedsOfType(type: string): boolean {
+        return (this.$store.state.printer.mmu_leds?.[type] ?? 0) > 0
+    }
+
+    get ledEffectModule(): boolean {
+        return this.$store.state.printer.mmu_leds?.led_effect_module ?? false
+    }
+
+    private unitDisplayName(unit: number): string {
+        const name = this.unitDetails(unit).name
+        return `MMU #${unit + 1} - ${name}`
+    }
+
+    private updateLeds() {
+        const command: string = `
+            MMU_LED QUIET=1
+            ENABLE=${this.localLedEnable ? 1 : 0}
+            ANIMATION=${this.localLedAnimation ? 1 : 0}
+            ENTRY_EFFECT=${this.localEntryEffect}
+            EXIT_EFFECT=${this.localExitEffect}
+            STATUS_EFFECT=${this.localStatusEffect}
+        `
+            .replace(/\s+/g, ' ')
+            .trim()
+        this.doLoadingSend(command, 'mmu_led')
+
+        this.updateTMacroColor()
+    }
+
+    private updateTMacroColor() {
+        const command: string = `MMU_TEST_CONFIG QUIET=1 t_macro_color=${this.localTMacroColor}`
+        this.doLoadingSend(command, 'mmu_test_config')
+    }
+
+    close() {
+        this.$emit('close')
+    }
+}
+</script>
+
+<style scoped>
+.settings-row-title {
+    display: block;
+    width: 100%;
+    font-weight: bold;
+}
+
+.settings-row-subtitle {
+    display: block;
+    font-size: 0.8em;
+    line-height: 1.3;
+    margin-top: 3px;
+}
+
+.short-switch {
+    padding-top: 4px;
+    margin-top: 2px;
+    margin-bottom: 4px;
+}
+
+::v-deep .short-switch .v-label {
+    font-size: 0.8em;
+}
+
+.btn-small-text {
+    font-size: 0.8em;
+}
+
+.btn-small-text .v-icon {
+    margin-right: 4px;
+}
+
+.btn-no-text {
+    height: 50% !important;
+}
+
+.btn-no-text .v-icon {
+    margin-right: 0;
+}
+
+.disabled-row {
+    opacity: 0.5;
+}
+</style>
diff --git a/src/components/dialogs/MmuRecoverStateDialog.vue b/src/components/dialogs/MmuRecoverStateDialog.vue
new file mode 100644
index 000000000..45c991747
--- /dev/null
+++ b/src/components/dialogs/MmuRecoverStateDialog.vue
@@ -0,0 +1,292 @@
+<template>
+    <v-dialog v-model="showDialog" width="600" persistent :fullscreen="isMobile">
+        <panel
+            :title="$t('Panels.MmuPanel.RecoverState')"
+            :icon="mdiCogRefresh"
+            card-class="mmu-recover-state-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="close">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+
+            <v-card-subtitle>
+                {{ $t('Panels.MmuPanel.MmuRecoverDialog.Intro') }}
+            </v-card-subtitle>
+
+            <v-card-text>
+                <v-row class="fixed-height">
+                    <v-col class="col-1" />
+                    <v-col class="col-5 d-flex justify-center">
+                        <v-row class="d-flex flex-row">
+                            <v-col class="d-flex justify-center flex-column">
+                                <span class="settings-row-title">Tool</span>
+                                <span class="settings-row-subtitle">
+                                    {{ $t('Panels.MmuPanel.MmuRecoverDialog.SetTool') }}
+                                </span>
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                    <v-col class="col-5 d-flex justify-end align-center">
+                        <v-select
+                            v-model="selectedTool"
+                            :items="toolsList"
+                            :error-messages="toolErrorMessage"
+                            outlined
+                            dense />
+                    </v-col>
+                </v-row>
+                <v-divider class="my-2"></v-divider>
+                <v-row class="fixed-height">
+                    <v-col class="col-1" />
+                    <v-col class="col-5 d-flex justify-center">
+                        <v-row class="d-flex flex-row">
+                            <v-col class="d-flex justify-center flex-column">
+                                <span class="settings-row-title">Gate</span>
+                                <span class="settings-row-subtitle">
+                                    {{ $t('Panels.MmuPanel.MmuRecoverDialog.SetGate') }}
+                                </span>
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                    <v-col class="col-5 d-flex justify-end align-center">
+                        <v-select
+                            v-model="selectedGate"
+                            :items="gatesList"
+                            :error-messages="gateErrorMessage"
+                            outlined
+                            dense />
+                    </v-col>
+                </v-row>
+                <v-divider class="my-2"></v-divider>
+                <v-row class="fixed-height">
+                    <v-col class="col-1" />
+                    <v-col class="col-5 d-flex justify-center">
+                        <v-row class="d-flex flex-row">
+                            <v-col class="d-flex justify-center flex-column">
+                                <span class="settings-row-title">Filament Position</span>
+                                <span class="settings-row-subtitle">
+                                    {{ $t('Panels.MmuPanel.MmuRecoverDialog.FilamentLoaded') }}
+                                </span>
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                    <v-col class="col-5 d-flex justify-end align-center">
+                        <v-select
+                            v-model="selectedPos"
+                            :items="posList"
+                            :error-messages="posErrorMessage"
+                            outlined
+                            dense />
+                    </v-col>
+                </v-row>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="close">{{ $t('Panels.MmuPanel.Cancel') }}</v-btn>
+                <v-btn color="primary" :disabled="okDisabled" text @click="commit">
+                    {{ $t('Panels.MmuPanel.Ok') }}
+                </v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiCloseThick, mdiCogRefresh } from '@mdi/js'
+
+@Component({
+    components: { Panel },
+})
+export default class MmuRecoverDialog extends Mixins(BaseMixin, MmuMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiCogRefresh = mdiCogRefresh
+
+    @Prop({ required: true }) readonly showDialog!: boolean
+
+    private localGate: number = -1
+    private localTool: number = -1
+    private localFilamentPos: number = -1
+
+    @Watch('showDialog')
+    onShowDialogChanged(newValue: boolean): void {
+        if (newValue) {
+            this.localGate = this.gate
+            this.localTool = this.tool
+            this.localFilamentPos = this.filamentPos
+        }
+    }
+
+    get selectedTool(): string {
+        if (this.localTool === this.TOOL_GATE_UNKNOWN) {
+            return 'Unknown'
+        } else if (this.localTool === this.TOOL_GATE_BYPASS) {
+            return 'Bypass'
+        }
+        return `T${this.localTool}`
+    }
+
+    set selectedTool(newTool: string): void {
+        const index = this.toolsList.findIndex((item) => item === newTool)
+        if (index == this.numGates) {
+            this.localTool = this.TOOL_GATE_BYPASS
+        } else {
+            this.localTool = index
+        }
+    }
+
+    get toolsList(): string[] {
+        const tools: string[] = []
+        for (let i = 0; i < this.numGates; i++) {
+            tools.push(`T${i}`)
+        }
+        if (this.hasBypass) tools.push('Bypass')
+        return tools
+    }
+
+    get toolErrorMessage(): string {
+        if (this.localTool === this.TOOL_GATE_UNKNOWN) {
+            return this.$t('Panels.MmuPanel.MmuRecoverDialog.NoTool')
+        } else if (this.localGate === this.TOOL_GATE_BYPASS && this.localTool !== this.TOOL_GATE_BYPASS) {
+            return this.$t('Panels.MmuPanel.MmuRecoverDialog.GateBypass')
+        }
+        return ''
+    }
+
+    get selectedGate(): string {
+        if (this.localGate === this.TOOL_GATE_UNKNOWN) {
+            return 'Unknown'
+        } else if (this.localGate === this.TOOL_GATE_BYPASS) {
+            return 'Bypass'
+        }
+        return `${this.gateIndexText(this.localGate)}`
+    }
+
+    set selectedGate(newGate: string): void {
+        const index = this.gatesList.findIndex((item) => item === newGate)
+        if (index == this.numGates) {
+            this.localGate = this.TOOL_GATE_BYPASS
+        } else {
+            this.localGate = index
+        }
+    }
+
+    get gatesList(): string[] {
+        const gates: string[] = []
+        for (let gate = 0; gate < this.numGates; gate++) {
+            gates.push(this.gateIndexText(gate))
+        }
+        if (this.hasBypass) gates.push('Bypass')
+        return gates
+    }
+
+    get gateErrorMessage(): string {
+        if (this.localGate === this.TOOL_GATE_UNKNOWN) {
+            return this.$t('Panels.MmuPanel.MmuRecoverDialog.NoGate')
+        } else if (this.localTool === this.TOOL_GATE_BYPASS && this.localGate !== this.TOOL_GATE_BYPASS) {
+            return this.$t('Panels.MmuPanel.MmuRecoverDialog.ToolBypass')
+        } else if (this.localGate >= 0 && this.ttgMap[this.localGate] !== this.localTool) {
+            const msg = this.$t('Panels.MmuPanel.MmuRecoverDialog.Remap', { tool: `T${this.localTool}` })
+            return `${this.$t('Panels.MmuPanel.MmuRecoverDialog.WarningPrefix')} ${msg}`
+        }
+        return ''
+    }
+
+    private gateIndexText(gateIndex: number): string {
+        const num_units = this.$store.state.printer?.mmu_machine?.num_units
+        if (num_units > 1) {
+            for (let i = 0; i < num_units; i++) {
+                const unitRef = `unit_${i}`
+                const unit = this.$store.state.printer?.mmu_machine?.[unitRef]
+                if (i > 0 && gateIndex >= unit.first_gate && gateIndex < unit.first_gate + unit.num_gates) {
+                    return `${gateIndex} (unit #${i + 1})`
+                }
+            }
+        }
+        return `${gateIndex}`
+    }
+
+    get selectedPos(): string {
+        if (this.localFilamentPos === this.FILAMENT_POS_UNLOADED) {
+            return 'UNLOADED'
+        } else if (this.localFilamentPos === this.FILAMENT_POS_LOADED) {
+            return 'LOADED'
+        }
+        return 'UNKNOWN'
+    }
+
+    set selectedPos(newPos: string): void {
+        if (newPos === 'UNLOADED') {
+            this.localFilamentPos = this.FILAMENT_POS_UNLOADED
+        } else if (newPos === 'LOADED') {
+            this.localFilamentPos = this.FILAMENT_POS_LOADED
+        }
+        this.localFilamentPos = this.FILAMENT_POS_UNKNOWN
+    }
+
+    get posList(): string[] {
+        return ['UNKNOWN', 'UNLOADED', 'LOADED']
+    }
+
+    get posErrorMessage(): string {
+        if (this.localFilamentPos === this.FILAMENT_POS_UNKNOWN) {
+            return `${this.$t('Panels.MmuPanel.MmuRecoverDialog.WarningPrefix')} ${this.$t('Panels.MmuPanel.MmuRecoverDialog.NoPosition')}`
+        }
+        return ''
+    }
+
+    get okDisabled(): boolean {
+        let tError =
+            this.toolErrorMessage !== '' &&
+            !this.toolErrorMessage.startsWith(this.$t('Panels.MmuPanel.MmuRecoverDialog.WarningPrefix'))
+        let gError =
+            this.gateErrorMessage !== '' &&
+            !this.gateErrorMessage.startsWith(this.$t('Panels.MmuPanel.MmuRecoverDialog.WarningPrefix'))
+        let pError =
+            this.posErrorMessage !== '' &&
+            !this.posErrorMessage.startsWith(this.$t('Panels.MmuPanel.MmuRecoverDialog.WarningPrefix'))
+        return tError || gError || pError
+    }
+
+    close() {
+        this.$emit('close')
+    }
+
+    commit() {
+        let cmd = `MMU_RECOVER TOOL=${this.localTool} GATE=${this.localGate}`
+        if (this.localFilamentPos === this.FILAMENT_POS_UNLOADED) {
+            cmd += ' LOADED=0'
+        } else if (this.localFilamentPos === this.FILAMENT_POS_LOADED) {
+            cmd += ' LOADED=1'
+        }
+        this.doSend(cmd)
+        this.close()
+    }
+}
+</script>
+
+<style scoped>
+.settings-row-title {
+    display: block;
+    width: 100%;
+    font-weight: bold;
+}
+
+.settings-row-subtitle {
+    display: block;
+    font-size: 0.8em;
+    line-height: 1.3;
+    margin-top: 3px;
+}
+
+.fixed-height {
+    min-height: 100px;
+}
+</style>
diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
index cfd200186..8633d6a40 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
@@ -2,7 +2,9 @@
     <div>
         <v-dialog v-model="showDialog" width="800" persistent :fullscreen="isMobile">
             <panel
-                :title="$t('Panels.SpoolmanPanel.ChangeSpool')"
+                :title="
+                    setActiveSpool ? $t('Panels.SpoolmanPanel.ChangeSpool') : $t('Panels.SpoolmanPanel.SelectSpool')
+                "
                 :icon="mdiAdjust"
                 card-class="spoolman-change-spool-dialog"
                 :margin-bottom="false">
@@ -85,6 +87,7 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
 
     @Prop({ required: true }) declare readonly showDialog: boolean
     @Prop({ required: false, default: null }) declare readonly tool?: string
+    @Prop({ required: false, default: true }) declare readonly setActiveSpool?: boolean
 
     search = ''
 
@@ -188,6 +191,13 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
     }
 
     setSpool(spool: ServerSpoolmanStateSpool) {
+        // If dialog is used for selection only, bypass setting of active spool and propogate event
+        if (!this.setActiveSpool) {
+            this.$emit('select-spool', spool)
+            this.close()
+            return
+        }
+
         this.$store.dispatch('server/spoolman/setActiveSpool', spool.id)
 
         // Close the dialog if no tool is selected
diff --git a/src/components/dialogs/StartPrintDialog.vue b/src/components/dialogs/StartPrintDialog.vue
index 363f955dd..9a489818d 100644
--- a/src/components/dialogs/StartPrintDialog.vue
+++ b/src/components/dialogs/StartPrintDialog.vue
@@ -19,7 +19,8 @@
                     {{ question }}
                 </p>
             </v-card-text>
-            <start-print-dialog-spoolman v-if="moonrakerComponents.includes('spoolman')" :file="file" />
+            <start-print-dialog-mmu v-if="isMmuPrint" :file="file" />
+            <start-print-dialog-spoolman v-else-if="moonrakerComponents.includes('spoolman')" :file="file" />
             <template v-if="moonrakerComponents.includes('timelapse')">
                 <v-divider v-if="!moonrakerComponents.includes('spoolman')" class="mt-3 mb-2" />
                 <v-card-text class="py-0">
@@ -70,6 +71,14 @@ export default class StartPrintDialog extends Mixins(BaseMixin) {
     @Prop({ required: true })
     declare file: FileStateGcodefile
 
+    // Happy Hare MMU support for initial tool->gate mapping
+    get isMmuPrint() {
+        if (this.$store.state.printer.mmu?.enabled) {
+            return (this.file.referenced_tools?.length ?? 1) > 1 || this.$store.state.printer.mmu?.gate !== -2
+        }
+        return false
+    }
+
     get timelapseEnabled() {
         return this.$store.state.server.timelapse?.settings?.enabled ?? false
     }
@@ -111,7 +120,7 @@ export default class StartPrintDialog extends Mixins(BaseMixin) {
     }
 
     get question() {
-        if (this.active_spool)
+        if (this.active_spool && !this.isMmuPrint)
             return this.$t('Dialogs.StartPrint.DoYouWantToStartFilenameFilament', {
                 filename: this.file?.filename ?? 'unknown',
             })
diff --git a/src/components/dialogs/StartPrintDialogMmu.vue b/src/components/dialogs/StartPrintDialogMmu.vue
new file mode 100644
index 000000000..30760cc16
--- /dev/null
+++ b/src/components/dialogs/StartPrintDialogMmu.vue
@@ -0,0 +1,53 @@
+<template>
+    <v-card-text class="pb-0">
+        <v-divider class="mt-4 mb-4" />
+        <p class="body-2">
+            {{ summary }}
+        </p>
+        <div class="text-center">
+            <v-btn color="primary" medium @click="showEditTtgMapDialog = true">
+                <v-icon left>{{ mdiStateMachine }}</v-icon>
+                {{ $t('Panels.MmuPanel.EditTtgMap') }}
+            </v-btn>
+        </div>
+        <v-divider :class="classSecondDivider" />
+        <mmu-edit-ttg-map-dialog
+            :file="file"
+            :show-dialog="showEditTtgMapDialog"
+            @close="showEditTtgMapDialog = false" />
+    </v-card-text>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+import { FileStateGcodefile } from '@/store/files/types'
+import { mdiStateMachine } from '@mdi/js'
+
+@Component({})
+export default class StartPrintDialogMmu extends Mixins(BaseMixin, MmuMixin) {
+    mdiStateMachine = mdiStateMachine
+
+    showEditTtgMapDialog = false
+
+    @Prop({ required: true }) readonly file!: FileStateGcodefile
+
+    get summary() {
+        const referencedTools = this.file.referenced_tools ?? ''
+        const numTools = referencedTools.length
+        if (numTools <= 1 && this.gate !== this.TOOL_GATE_BYPASS) {
+            return this.$t('Panels.MmuPanel.StartPrintDialogMmu.SingleColor')
+        }
+        return this.$t('Panels.MmuPanel.StartPrintDialogMmu.MultiColor', { numTools: numTools })
+    }
+
+    get classSecondDivider() {
+        const classes = ['mt-4']
+        classes.push(this.moonrakerComponents.includes('timelapse') ? 'mb-2' : 'mb-0')
+        return classes
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/mixins/dashboard.ts b/src/components/mixins/dashboard.ts
index b8120a6db..09b8451c8 100644
--- a/src/components/mixins/dashboard.ts
+++ b/src/components/mixins/dashboard.ts
@@ -13,6 +13,8 @@ import {
     mdiPrinter3dNozzle,
     mdiThermometerLines,
     mdiWebcam,
+    mdiAdjust,
+    mdiMulticast,
 } from '@mdi/js'
 
 @Component
@@ -67,6 +69,10 @@ export default class DashboardMixin extends BaseMixin {
                 return mdiEngine
             case 'extruder-control':
                 return mdiPrinter3dNozzle
+            case 'spoolman':
+                return mdiAdjust
+            case 'mmu':
+                return mdiMulticast
 
             default:
                 return mdiInformation
diff --git a/src/components/mixins/mmu.ts b/src/components/mixins/mmu.ts
new file mode 100644
index 000000000..76318bfe1
--- /dev/null
+++ b/src/components/mixins/mmu.ts
@@ -0,0 +1,723 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+interface MmuGateDetails {
+    index: number
+    status: number
+    filamentName: string
+    material: string
+    color: string
+    temperature: number
+    spoolId: number
+    speedOverride: number
+    endlessSpoolGroup: number | null
+}
+
+interface SlicerToolDetails {
+    color: string
+    material: string
+    temp: number
+    name: string
+    inUse: boolean
+}
+
+interface MmuUnitDetails {
+    name: string
+    version: string
+    numGates: number
+    firstGate: number
+    selectorType: string
+    variableRotationDistances: boolean
+    variableBowdenLengths: boolean
+    requireBowdenMove: boolean
+    filamentAlwaysGripped: boolean
+    hasBypass: boolean
+    multiGear: boolean
+}
+
+export const W3C_COLORS: { name: string; hex: string }[] = [
+    { name: 'aliceblue', hex: '#F0F8FF' },
+    { name: 'antiquewhite', hex: '#FAEBD7' },
+    { name: 'aqua', hex: '#00FFFF' },
+    { name: 'aquamarine', hex: '#7FFFD4' },
+    { name: 'azure', hex: '#F0FFFF' },
+    { name: 'beige', hex: '#F5F5DC' },
+    { name: 'bisque', hex: '#FFE4C4' },
+    { name: 'black', hex: '#000000' },
+    { name: 'blanchedalmond', hex: '#FFEBCD' },
+    { name: 'blue', hex: '#0000FF' },
+    { name: 'blueviolet', hex: '#8A2BE2' },
+    { name: 'brown', hex: '#A52A2A' },
+    { name: 'burlywood', hex: '#DEB887' },
+    { name: 'cadetblue', hex: '#5F9EA0' },
+    { name: 'chartreuse', hex: '#7FFF00' },
+    { name: 'chocolate', hex: '#D2691E' },
+    { name: 'coral', hex: '#FF7F50' },
+    { name: 'cornflowerblue', hex: '#6495ED' },
+    { name: 'cornsilk', hex: '#FFF8DC' },
+    { name: 'crimson', hex: '#DC143C' },
+    { name: 'cyan', hex: '#00FFFF' },
+    { name: 'darkblue', hex: '#00008B' },
+    { name: 'darkcyan', hex: '#008B8B' },
+    { name: 'darkgoldenrod', hex: '#B8860B' },
+    { name: 'darkgray', hex: '#A9A9A9' },
+    { name: 'darkgreen', hex: '#006400' },
+    { name: 'darkgrey', hex: '#A9A9A9' },
+    { name: 'darkkhaki', hex: '#BDB76B' },
+    { name: 'darkmagenta', hex: '#8B008B' },
+    { name: 'darkolivegreen', hex: '#556B2F' },
+    { name: 'darkorange', hex: '#FF8C00' },
+    { name: 'darkorchid', hex: '#9932CC' },
+    { name: 'darkred', hex: '#8B0000' },
+    { name: 'darksalmon', hex: '#E9967A' },
+    { name: 'darkseagreen', hex: '#8FBC8F' },
+    { name: 'darkslateblue', hex: '#483D8B' },
+    { name: 'darkslategray', hex: '#2F4F4F' },
+    { name: 'darkslategrey', hex: '#2F4F4F' },
+    { name: 'darkturquoise', hex: '#00CED1' },
+    { name: 'darkviolet', hex: '#9400D3' },
+    { name: 'deeppink', hex: '#FF1493' },
+    { name: 'deepskyblue', hex: '#00BFFF' },
+    { name: 'dimgray', hex: '#696969' },
+    { name: 'dimgrey', hex: '#696969' },
+    { name: 'dodgerblue', hex: '#1E90FF' },
+    { name: 'firebrick', hex: '#B22222' },
+    { name: 'floralwhite', hex: '#FFFAF0' },
+    { name: 'forestgreen', hex: '#228B22' },
+    { name: 'fuchsia', hex: '#FF00FF' },
+    { name: 'gainsboro', hex: '#DCDCDC' },
+    { name: 'ghostwhite', hex: '#F8F8FF' },
+    { name: 'gold', hex: '#FFD700' },
+    { name: 'goldenrod', hex: '#DAA520' },
+    { name: 'gray', hex: '#808080' },
+    { name: 'green', hex: '#008000' },
+    { name: 'greenyellow', hex: '#ADFF2F' },
+    { name: 'grey', hex: '#808080' },
+    { name: 'honeydew', hex: '#F0FFF0' },
+    { name: 'hotpink', hex: '#FF69B4' },
+    { name: 'indianred', hex: '#CD5C5C' },
+    { name: 'indigo', hex: '#4B0082' },
+    { name: 'ivory', hex: '#FFFFF0' },
+    { name: 'khaki', hex: '#F0E68C' },
+    { name: 'lavender', hex: '#E6E6FA' },
+    { name: 'lavenderblush', hex: '#FFF0F5' },
+    { name: 'lawngreen', hex: '#7CFC00' },
+    { name: 'lemonchiffon', hex: '#FFFACD' },
+    { name: 'lightblue', hex: '#ADD8E6' },
+    { name: 'lightcoral', hex: '#F08080' },
+    { name: 'lightcyan', hex: '#E0FFFF' },
+    { name: 'lightgoldenrodyellow', hex: '#FAFAD2' },
+    { name: 'lightgray', hex: '#D3D3D3' },
+    { name: 'lightgreen', hex: '#90EE90' },
+    { name: 'lightgrey', hex: '#D3D3D3' },
+    { name: 'lightpink', hex: '#FFB6C1' },
+    { name: 'lightsalmon', hex: '#FFA07A' },
+    { name: 'lightseagreen', hex: '#20B2AA' },
+    { name: 'lightskyblue', hex: '#87CEFA' },
+    { name: 'lightslategray', hex: '#778899' },
+    { name: 'lightslategrey', hex: '#778899' },
+    { name: 'lightsteelblue', hex: '#B0C4DE' },
+    { name: 'lightyellow', hex: '#FFFFE0' },
+    { name: 'lime', hex: '#00FF00' },
+    { name: 'limegreen', hex: '#32CD32' },
+    { name: 'linen', hex: '#FAF0E6' },
+    { name: 'magenta', hex: '#FF00FF' },
+    { name: 'maroon', hex: '#800000' },
+    { name: 'mediumaquamarine', hex: '#66CDAA' },
+    { name: 'mediumblue', hex: '#0000CD' },
+    { name: 'mediumorchid', hex: '#BA55D3' },
+    { name: 'mediumpurple', hex: '#9370DB' },
+    { name: 'mediumseagreen', hex: '#3CB371' },
+    { name: 'mediumslateblue', hex: '#7B68EE' },
+    { name: 'mediumspringgreen', hex: '#00FA9A' },
+    { name: 'mediumturquoise', hex: '#48D1CC' },
+    { name: 'mediumvioletred', hex: '#C71585' },
+    { name: 'midnightblue', hex: '#191970' },
+    { name: 'mintcream', hex: '#F5FFFA' },
+    { name: 'mistyrose', hex: '#FFE4E1' },
+    { name: 'moccasin', hex: '#FFE4B5' },
+    { name: 'navajowhite', hex: '#FFDEAD' },
+    { name: 'navy', hex: '#000080' },
+    { name: 'oldlace', hex: '#FDF5E6' },
+    { name: 'olive', hex: '#808000' },
+    { name: 'olivedrab', hex: '#6B8E23' },
+    { name: 'orange', hex: '#FFA500' },
+    { name: 'orangered', hex: '#FF4500' },
+    { name: 'orchid', hex: '#DA70D6' },
+    { name: 'palegoldenrod', hex: '#EEE8AA' },
+    { name: 'palegreen', hex: '#98FB98' },
+    { name: 'paleturquoise', hex: '#AFEEEE' },
+    { name: 'palevioletred', hex: '#DB7093' },
+    { name: 'papayawhip', hex: '#FFEFD5' },
+    { name: 'peachpuff', hex: '#FFDAB9' },
+    { name: 'peru', hex: '#CD853F' },
+    { name: 'pink', hex: '#FFC0CB' },
+    { name: 'plum', hex: '#DDA0DD' },
+    { name: 'powderblue', hex: '#B0E0E6' },
+    { name: 'purple', hex: '#800080' },
+    { name: 'red', hex: '#FF0000' },
+    { name: 'rosybrown', hex: '#BC8F8F' },
+    { name: 'royalblue', hex: '#4169E1' },
+    { name: 'saddlebrown', hex: '#8B4513' },
+    { name: 'salmon', hex: '#FA8072' },
+    { name: 'sandybrown', hex: '#F4A460' },
+    { name: 'seagreen', hex: '#2E8B57' },
+    { name: 'seashell', hex: '#FFF5EE' },
+    { name: 'sienna', hex: '#A0522D' },
+    { name: 'silver', hex: '#C0C0C0' },
+    { name: 'skyblue', hex: '#87CEEB' },
+    { name: 'slateblue', hex: '#6A5ACD' },
+    { name: 'slategray', hex: '#708090' },
+    { name: 'slategrey', hex: '#708090' },
+    { name: 'snow', hex: '#FFFAFA' },
+    { name: 'springgreen', hex: '#00FF7F' },
+    { name: 'steelblue', hex: '#4682B4' },
+    { name: 'tan', hex: '#D2B48C' },
+    { name: 'teal', hex: '#008080' },
+    { name: 'thistle', hex: '#D8BFD8' },
+    { name: 'tomato', hex: '#FF6347' },
+    { name: 'turquoise', hex: '#40E0D0' },
+    { name: 'violet', hex: '#EE82EE' },
+    { name: 'wheat', hex: '#F5DEB3' },
+    { name: 'white', hex: '#FFFFFF' },
+    { name: 'whitesmoke', hex: '#F5F5F5' },
+    { name: 'yellow', hex: '#FFFF00' },
+    { name: 'yellowgreen', hex: '#9ACD32' },
+]
+
+@Component({})
+export default class MmuMixin extends Vue {
+    get hasMmu(): boolean {
+        return !!this.$store.state.printer.mmu
+    }
+
+    get hasEncoder(): boolean {
+        return !!this.$store.state.printer.mmu?.encoder
+    }
+
+    /*
+     * Select encoder properties
+     */
+    get encoderPos(): number {
+        return Math.round(this.$store.state.printer.mmu?.encoder?.encoder_pos ?? 0)
+    }
+
+    get encoderEnabled(): number {
+        return this.$store.state.printer.mmu?.encoder?.enabled
+    }
+
+    get encoderDesiredHeadroom(): number {
+        return this.$store.state.printer.mmu?.encoder.desired_headroom
+    }
+
+    get encoderDetectionLength(): number {
+        return this.$store.state.printer.mmu.encoder.detection_length
+    }
+
+    get encoderDetectionMode(): number {
+        return this.$store.state.printer.mmu?.encoder.detection_mode
+    }
+
+    get encoderFlowRate(): number {
+        return this.$store.state.printer.mmu?.encoder.flow_rate
+    }
+
+    /*
+     * All Happy Hare mmu_machine printer variables
+     */
+    get numUnits(): number {
+        return this.$store.state.printer.mmu_machine?.num_units ?? 1
+    }
+
+    private unitDetails(unitIndex: number): MmuUnitDetails {
+        const unitRef = `unit_${unitIndex}`
+        const ud: MmuUnitDetails = {
+            name: this.$store.state.printer.mmu_machine?.[unitRef]?.name ?? 'Unit',
+            version: this.$store.state.printer.mmu_machine?.[unitRef]?.version ?? '1.0',
+            numGates: this.$store.state.printer.mmu_machine?.[unitRef]?.num_gates ?? 1,
+            firstGate: this.$store.state.printer.mmu_machine?.[unitRef]?.first_gate ?? 0,
+            selectorType: this.$store.state.printer.mmu_machine?.[unitRef]?.selector_type ?? 'VirtualSelector',
+            variableRotationDistances:
+                this.$store.state.printer.mmu_machine?.[unitRef]?.variable_rotation_distances ?? true,
+            variableBowdenLengths: this.$store.state.printer.mmu_machine?.[unitRef]?.variable_bowden_lengths ?? true,
+            requireBowdenMove: this.$store.state.printer.mmu_machine?.[unitRef]?.require_bowden_move ?? true,
+            filamentAlwaysGripped: this.$store.state.printer.mmu_machine?.[unitRef]?.filament_always_gripped ?? false,
+            hasBypass: this.$store.state.printer.mmu_machine?.[unitRef]?.has_bypass ?? false,
+            multiGear: this.$store.state.printer.mmu_machine?.[unitRef]?.multi_gear ?? false,
+        }
+        return ud
+    }
+
+    /*
+     * All Happy Hare mmu printer variables
+     */
+    get enabled(): boolean {
+        return this.$store.state.printer.mmu?.enabled ?? false
+    }
+
+    get numGates(): number {
+        return this.$store.state.printer.mmu?.num_gates ?? 0
+    }
+
+    get printState(): string {
+        return this.$store.state.printer.mmu?.print_state
+    }
+
+    get isPrinting(): boolean {
+        return ['started', 'printing'].includes(this.$store.state.printer.mmu?.print_state)
+    }
+
+    get isInPrint(): boolean {
+        return ['printing', 'pause_locked', 'paused'].includes(this.$store.state.printer.mmu?.print_state)
+    }
+
+    get isMmuPaused(): boolean {
+        return this.$store.state.printer.mmu?.is_paused ?? false
+        return ['pause_locked', 'paused'].includes(this.$store.state.printer.mmu?.print_state)
+    }
+
+    get isMmuPausedAndLocked(): boolean {
+        return ['pause_locked'].includes(this.$store.state.printer.mmu?.print_state)
+    }
+
+    get isHomed(): boolean {
+        return this.$store.state.printer.mmu?.is_homed ?? false
+    }
+
+    get gate(): number {
+        return this.$store.state.printer.mmu?.gate
+    }
+    get tool(): number {
+        return this.$store.state.printer.mmu?.tool
+    }
+    readonly TOOL_GATE_UNKNOWN: number = -1
+    readonly TOOL_GATE_BYPASS: number = -2
+
+    get activeFilament(): object[] {
+        return this.$store.state.printer.mmu?.active_filament
+    }
+
+    get numToolchanges(): number {
+        return this.$store.state.printer.mmu?.num_toolchanges
+    }
+
+    get lastTool(): number {
+        return this.$store.state.printer.mmu?.last_tool
+    }
+
+    get nextTool(): number {
+        return this.$store.state.printer.mmu?.next_tool
+    }
+
+    get toolchangePurgeVolue(): number {
+        return this.$store.state.printer.mmu?.toolchange_purge_volume
+    }
+
+    get lastToolchange(): string {
+        return this.$store.state.printer.mmu?.last_toolchange ?? ''
+    }
+
+    get operation(): string {
+        return this.$store.state.printer.mmu?.operation
+    }
+
+    get filament(): string {
+        return this.$store.state.printer.mmu?.filament
+    }
+
+    get filamentPosition(): number {
+        return (this.$store.state.printer.mmu?.filament_position ?? 0).toFixed(1)
+    }
+
+    get filamentPos(): number {
+        return this.$store.state.printer.mmu?.filament_pos ?? this.FILAMENT_POS_UNKNOWN
+    }
+    readonly FILAMENT_POS_UNKNOWN: number = -1
+    readonly FILAMENT_POS_UNLOADED: number = 0 // Parked in gate
+    readonly FILAMENT_POS_HOMED_GATE: number = 1 // Homed at either gate or gear sensor (currently assumed mutually exclusive sensors)
+    readonly FILAMENT_POS_START_BOWDEN: number = 2 // Point of fast load portion
+    readonly FILAMENT_POS_IN_BOWDEN: number = 3 // Some unknown position in the bowden
+    readonly FILAMENT_POS_END_BOWDEN: number = 4 // End of fast load portion
+    readonly FILAMENT_POS_HOMED_ENTRY: number = 5 // Homed at entry sensor
+    readonly FILAMENT_POS_HOMED_EXTRUDER: number = 6 // Collision homing case at extruder gear entry
+    readonly FILAMENT_POS_EXTRUDER_ENTRY: number = 7 // Past extruder gear entry
+    readonly FILAMENT_POS_HOMED_TS: number = 8 // Homed at toolhead sensor
+    readonly FILAMENT_POS_IN_EXTRUDER: number = 9 // In extruder past toolhead sensor
+    readonly FILAMENT_POS_LOADED: number = 10 // Homed to nozzle
+
+    get filamentDirection(): number {
+        return this.$store.state.printer.mmu?.filament_direction
+    }
+    readonly DIRECTION_LOAD: number = 1
+    readonly DIRECTION_UNKNOWN: number = 0
+    readonly DIRECTION_UNLOAD: number = -1
+
+    get bowdenProgress(): number {
+        return this.$store.state.printer.mmu?.bowden_progress ?? -1
+    }
+
+    get ttgMap(): number[] {
+        return this.$store.state.printer.mmu?.ttg_map
+    }
+
+    get endlessSpoolGroups(): number[] {
+        return this.$store.state.printer.mmu?.endless_spool_groups
+    }
+
+    get gateStatus(): number[] {
+        return this.$store.state.printer.mmu?.gate_status
+    }
+    readonly GATE_UNKNOWN: number = -1
+    readonly GATE_EMPTY: number = 0
+    readonly GATE_AVAILABLE: number = 1 // Available to load from either buffer or spool
+    readonly GATE_AVAILABLE_FROM_BUFFER: number = 2
+
+    get gateFilamentName(): string[] {
+        return this.$store.state.printer.mmu?.gate_filament_name
+    }
+
+    get gateMaterial(): string[] {
+        return this.$store.state.printer.mmu?.gate_material
+    }
+
+    get gateColor(): string[] {
+        return this.$store.state.printer.mmu?.gate_color
+    }
+
+    get gateTemperature(): number[] {
+        return this.$store.state.printer.mmu?.gate_temperature
+    }
+
+    get gateSpoolId(): number[] {
+        return this.$store.state.printer.mmu?.gate_spool_id
+    }
+
+    get gateSpeedOverride(): number[] {
+        return this.$store.state.printer.mmu?.gate_speed_override
+    }
+
+    get gateMap(): MmuGateDetails[] {
+        return this.gateStatus.map((_, index) => this.gateDetails(index))
+    }
+
+    private gateDetails(gateIndex: number): MmuGateDetails {
+        const gd: MmuGateDetails = {}
+        if (gateIndex === this.TOOL_GATE_BYPASS) {
+            gd.index = -2
+            gd.status = -1
+            if (this.gate === gateIndex) {
+                gd.filamentName = this.$store.state.server.spoolman?.active_spool?.filament?.name ?? 'No active spool'
+                gd.material = this.$store.state.server.spoolman?.active_spool?.filament?.material ?? 'Unknown'
+                gd.color = this.formColorString(
+                    this.$store.state.server.spoolman?.active_spool?.filament.color_hex ?? null
+                )
+                gd.temperature = this.$store.state.server.spoolman?.active_spool?.filament?.settings_extruder_temp ?? -1
+                gd.spoolId = this.$store.state.server.spoolman?.active_spool?.id ?? -1
+            } else {
+                gd.filamentName = 'Unknown'
+                gd.material = 'Unknown'
+                gd.color = this.formColorString(null)
+                gd.temperature = -1
+                gd.spoolId = -1
+            }
+            gd.speedOverride = 100
+            gd.endlessSpoolGroup = null
+        } else {
+            gd.index = gateIndex
+            gd.status = this.$store.state.printer.mmu?.gate_status?.[gateIndex] ?? -1
+            gd.filamentName = this.$store.state.printer.mmu?.gate_filament_name?.[gateIndex] || 'Unknown'
+            gd.material = this.$store.state.printer.mmu?.gate_material?.[gateIndex] || 'Unknown'
+            gd.color = this.formColorString(this.$store.state.printer.mmu?.gate_color[gateIndex] ?? '')
+            gd.temperature = this.$store.state.printer.mmu?.gate_temperature?.[gateIndex] ?? -1
+            gd.spoolId = this.$store.state.printer.mmu?.gate_spool_id?.[gateIndex] ?? -1
+            gd.speedOverride = this.$store.state.printer.mmu?.gate_speed_override?.[gateIndex] ?? 100
+            gd.endlessSpoolGroup = this.$store.state.printer.mmu?.endless_spool_groups?.[gateIndex] ?? gateIndex
+        }
+        return gd
+    }
+
+    private spoolmanSpool(spoolId: number) {
+        const activeSpool = this.$store.state.server.spoolman.active_spool ?? null
+        if (activeSpool?.id === spoolId) {
+            return activeSpool
+        }
+        const spools = this.$store.state.server.spoolman?.spools ?? []
+        return spools.find((spool) => spool.id === spoolId) ?? null
+    }
+
+    //return this.$store.state.printer.mmu?.gate_color_rgb
+    //return this.$store.state.printer.mmu?.slicer_color_rgb
+    //return this.$store.state.printer.mmu?.tool_extrusion_multipliers
+    //return this.$store.state.printer.mmu?.tool_speed_multipliers
+
+    get slicerToolMap(): object {
+        return this.$store.state.printer.mmu?.slicer_tool_map
+    }
+
+    private toolDetails(toolIndex: number, file?: FileStateGcodefile): SlicerToolDetails {
+        const td: SlicerToolDetails = {}
+
+        // Have file so use metadata
+        if (file) {
+            // Different slicers use extruder/filament colors differently
+            let c1, c2
+            switch (file.slicer) {
+                case 'OrcaSlicer':
+                case 'BambuStudio':
+                    c1 = file.filament_colors ?? []
+                    c2 = file.extruder_colors ?? []
+                    break
+                case 'SuperSlicer':
+                default: // Assume PrusaSlicer
+                    c1 = file.extruder_colors ?? []
+                    c2 = file.filament_colors ?? []
+                    break
+            }
+            const colors = c1.length === 0 || c1.every((str) => str === '') ? c2 : c1
+            td.color = colors.length > toolIndex ? this.formColorString(colors[toolIndex]) : this.formColorString('')
+
+            // This is just a string so split
+            const materials = file.filament_type ?? ''
+            const processedMaterials = materials ? materials.split(/[,;]/).map((element) => element.trim()) : []
+            td.material = processedMaterials[toolIndex] || 'Unknown'
+
+            const temps = file.filament_temps ?? []
+            td.temp = temps.length > toolIndex ? temps[toolIndex] : -1
+
+            // This is just a string so split
+            const names = file.filament_name ?? ''
+            const processedNames = names
+                ? names.split(/[,;]/).map((element) => element.trim().replace(/^["']|["']$/g, ''))
+                : []
+            td.name = processedNames[toolIndex] || 'Unknown'
+
+            const referencedTools = file.referenced_tools ?? []
+            td.inUse = referencedTools?.includes(toolIndex) ?? false
+        } else {
+            // Use Happy Hare's slicer_tool_map
+            td.color = this.formColorString(
+                this.$store.state.printer.mmu?.slicer_tool_map?.tools?.[toolIndex]?.color ?? ''
+            )
+            td.material = this.$store.state.printer.mmu?.slicer_tool_map?.tools?.[toolIndex]?.material || 'Unknown'
+            td.temp = this.$store.state.printer.mmu?.slicer_tool_map?.tools?.[toolIndex]?.temp ?? -1
+            td.name = this.$store.state.printer.mmu?.slicer_tool_map?.tools?.[toolIndex]?.name || 'Unknown'
+            td.inUse = this.$store.state.printer.mmu?.slicer_tool_map?.tools?.[toolIndex]?.in_use || false
+        }
+        return td
+    }
+
+    get action(): string {
+        return this.$store.state.printer.mmu?.action
+    }
+    readonly ACTION_IDLE: string = 'Idle'
+    readonly ACTION_LOADING: string = 'Loading'
+    readonly ACTION_LOADING_EXTRUDER: string = 'Loading Ext'
+    readonly ACTION_UNLOADING: string = 'Unloading'
+    readonly ACTION_UNLOADING_EXTRUDER: string = 'Unloading Ext'
+    readonly ACTION_FORMING_TIP: string = 'Forming Tip'
+    readonly ACTION_CUTTING_TIP: string = 'Cutting Tip'
+    readonly ACTION_HEATING: string = 'Heating'
+    readonly ACTION_CHECKING: string = 'Checking'
+    readonly ACTION_HOMING: string = 'Homing'
+    readonly ACTION_SELECTING: string = 'Selecting'
+    readonly ACTION_CUTTING_FILAMENT: string = 'Cutting Filament'
+    readonly ACTION_PURGING: string = 'Purging'
+
+    get hasBypass(): boolean {
+        return this.$store.state.printer.mmu?.has_bypass ?? false
+    }
+
+    get syncDrive(): boolean {
+        return this.$store.state.printer.mmu?.sync_drive
+    }
+
+    //return this.$store.state.printer.mmu?.sync_feedback_state
+
+    get syncFeedbackEnabled(): boolean {
+        return this.$store.state.printer.mmu?.sync_feedback_enabled
+    }
+
+    get clogDetectionEnabled(): boolean {
+        return this.$store.state.printer.mmu?.clog_detection_enabled
+    }
+
+    get endlessSpoolEnabled(): boolean {
+        return this.$store.state.printer.mmu?.endless_spool_enabled
+    }
+
+    get reasonForPause(): string {
+        return this.$store.state.printer.mmu?.reason_for_pause ?? ''
+    }
+
+    get extruderFilamentRemaining(): number {
+        return this.$store.state.printer.mmu?.extruder_filament_remaining
+    }
+
+    get spoolmanSupport(): string {
+        return this.$store.state.printer.mmu?.spoolman_support ?? 'off'
+    }
+    readonly SPOOLMAN_OFF: string = 'off' // Spoolman disabled
+    readonly SPOOLMAN_READONLY: string = 'readonly' // Get filament attributes only
+    readonly SPOOLMAN_PUSH: string = 'push' // Local gatemap is the source or truth
+    readonly SPOOLMAN_PULL: string = 'pull' // Spoolman db is the source of truth
+
+    get sensors(): object[] {
+        return this.$store.state.printer.mmu?.sensors ?? []
+    }
+
+    get espoolerActive(): string {
+        return this.$store.state.printer.mmu?.espooler_active ?? ''
+    }
+
+    /*
+     * Optional printer variables based on selector type
+     */
+    get servo(): string {
+        return this.$store.state.printer.mmu?.servo ?? 'Unknown'
+    }
+
+    get grip(): string {
+        return this.$store.state.printer.mmu?.grip ?? 'Unknown'
+    }
+
+    /*
+     * Selective Happy Hare configuration parameters
+     */
+
+    get configGateHomingEndstop(): string {
+        // TODO ideally make dynamic because of MMU_TEST_CONFIG
+        return this.$store.state.printer.configfile.config.mmu?.gate_homing_endstop
+    }
+
+    get configExtruderHomingEndstop(): string {
+        // TODO ideally make dynamic because of MMU_TEST_CONFIG
+        return this.$store.state.printer.configfile.config.mmu?.extruder_homing_endstop
+    }
+
+    get configExtruderForceHoming(): boolean {
+        // TODO ideally make dynamic because of MMU_TEST_CONFIG
+        return (this.$store.state.printer.configfile.config.mmu?.extruder_force_homing ?? 0) === 1
+    }
+
+    get configTMacroColor(): string {
+        // TODO ideally make dynamic because of MMU_TEST_CONFIG
+        return this.$store.state.printer.configfile.config.mmu?.t_macro_color ?? 'slicer'
+    }
+    readonly T_MACRO_COLOR_OPTIONS: string[] = ['slicer', 'allgates', 'gatemap', 'off']
+
+    get varsCalibrationBowdenLengths(): number[] {
+        return this.$store.state.printer.save_variables?.variables?.mmu_calibration_bowden_lengths
+    }
+
+    get varsFilamentRemaining(): string {
+        return this.$store.state.printer.save_variables?.variables?.mmu_state_filament_remaining ?? 0
+    }
+
+    get varsFilamentRemainingColor(): string {
+        const color = this.$store.state.printer.save_variables?.variables?.mmu_state_filament_remaining_color ?? ''
+        if (color) return this.formColorString(color)
+        return color
+    }
+
+    get macroVarsLedEnable(): boolean {
+        return this.$store.state.printer['gcode_macro _MMU_LED_VARS']?.led_enable ?? false
+    }
+
+    get macroVarsLedAnimation(): boolean {
+        return this.$store.state.printer['gcode_macro _MMU_LED_VARS']?.led_animation ?? true
+    }
+
+    get macroVarsDefaultEntryEffect(): string {
+        return this.$store.state.printer['gcode_macro _MMU_LED_VARS']?.default_entry_effect ?? 'off'
+    }
+
+    get macroVarsDefaultExitEffect(): string {
+        return this.$store.state.printer['gcode_macro _MMU_LED_VARS']?.default_exit_effect ?? 'off'
+    }
+
+    get macroVarsDefaultStatusEffect(): string {
+        return this.$store.state.printer['gcode_macro _MMU_LED_VARS']?.default_status_effect ?? 'off'
+    }
+    readonly LED_OPTIONS: string[] = ['off', 'gate_status', 'filament_color', 'slicer_color']
+    readonly LED_STATUS_OPTIONS: string[] = [...this.LED_OPTIONS, 'on']
+
+    /*
+     * Miscellaneous
+     */
+
+    gateText(gate: number): string {
+        return gate === -1 ? '?' : gate === this.TOOL_GATE_BYPASS ? 'Bypass' : '@' + gate
+    }
+
+    toolText(tool: number): string {
+        return tool === -1 ? 'T?' : tool === this.TOOL_GATE_BYPASS ? 'Bypass' : 'T' + tool
+    }
+
+    // Empty string if nothing to report
+    get toolchangeText(): string {
+        if (this.nextTool === this.TOOL_GATE_UNKNOWN) return ''
+        const fromText =
+            this.lastTool !== this.TOOL_GATE_UNKNOWN
+                ? ` from ${this.lastTool === this.TOOL_GATE_BYPASS ? 'Bypass' : `T${this.lastTool}`}`
+                : ''
+        const toText = ` to ${this.nextTool === this.TOOL_GATE_BYPASS ? 'Bypass' : `T${this.nextTool}`}`
+        return `Changing tool${fromText}${toText}`
+    }
+
+    refreshSpoolmanData() {
+        this.$store.dispatch('server/spoolman/refreshSpools')
+    }
+
+    async doLoadingSend(gcode: string, loadingKey: string) {
+        await this.$store.dispatch('socket/addLoading', { name: loadingKey })
+        this.doSend(gcode)
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        await this.$store.dispatch('socket/removeLoading', { name: loadingKey })
+    }
+
+    doSend(gcode: string) {
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode })
+    }
+
+    get canSend(): boolean {
+        const idleTimeout = this.$store.state.printer.idle_timeout?.state
+        return (
+            this.klipperReadyForGui && !['printing'].includes(this.printer_state) && !['Printing'].includes(idleTimeout)
+        )
+    }
+
+    /*
+     * Helper functions
+     */
+
+    // Fix Happy Hare color strings (# problematic in klipper CLI)
+    readonly NO_FILAMENT_COLOR = '#808182E3'
+    private formColorString(color: string | null): string {
+        let hexaColor = this.NO_FILAMENT_COLOR
+        if (!color) return hexaColor
+
+        // Check if the color is a named color
+        const namedColor = W3C_COLORS.find((c) => c.name === color.toLowerCase())
+        if (namedColor) {
+            hexaColor = namedColor.hex
+        } else {
+            // Validate and format hex color codes
+            const hexColorPattern = /^#?[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/
+            if (hexColorPattern.test(color)) {
+                hexaColor = color
+                if (!hexaColor.startsWith('#')) hexaColor = '#' + hexaColor
+            }
+        }
+        if (hexaColor.length < 8) hexaColor = hexaColor + 'FF'
+        return hexaColor.toUpperCase()
+    }
+
+    private getLuminance({ r, g, b }) {
+        const a = [r, g, b].map(function (v) {
+            v /= 255
+            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)
+        })
+        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722
+    }
+}
diff --git a/src/components/panels/Mmu/MmuClogMeter.vue b/src/components/panels/Mmu/MmuClogMeter.vue
new file mode 100644
index 000000000..013725246
--- /dev/null
+++ b/src/components/panels/Mmu/MmuClogMeter.vue
@@ -0,0 +1,166 @@
+<template>
+    <svg
+        ref="clogMeter"
+        viewBox="0 0 140 140"
+        preserveAspectRatio="xMidYMid meet"
+        :class="{ 'disabled-clog': encoderDetectionMode === 0 || encoderEnabled === false }">
+        <g transform="rotate(120 70 70)">
+            <circle
+                cx="70"
+                cy="70"
+                r="50"
+                class="v-progress-circular__underlay"
+                fill="transparent"
+                stroke-width="18"
+                :stroke-dasharray="circumference"
+                :stroke-dashoffset="dialArc"></circle>
+            <circle
+                ref="dialCircle"
+                cx="70"
+                cy="70"
+                r="50"
+                class="primary-color"
+                fill="transparent"
+                stroke-width="18"
+                :stroke-dasharray="circumference"
+                :stroke-dashoffset="dashOffset" />
+        </g>
+        <g :transform="'rotate(' + headroomRotate + ' 70 70)'">
+            <circle
+                cx="70"
+                cy="70"
+                r="50"
+                class="warning-color"
+                fill="transparent"
+                stroke-width="18"
+                opacity="0.4"
+                :stroke-dasharray="circumference"
+                :stroke-dashoffset="headroomArc" />
+        </g>
+
+        <line
+            ref="minHeadroomLine"
+            :x1="x1MinHeadroom"
+            :y1="y1MinHeadroom"
+            x2="70"
+            y2="70"
+            :class="{ 'warning-color': headroomWarning, 'primary-color': !headroomWarning }"
+            stroke-width="4"
+            stroke-dashoffset="0"
+            stroke-dasharray="25,65" />
+        <line
+            :x1="x1Start"
+            :y1="y1Start"
+            x2="70"
+            y2="70"
+            stroke="white"
+            stroke-width="2"
+            stroke-dashoffset="0"
+            stroke-dasharray="24,65" />
+        <line
+            :x1="x1End"
+            :y1="y1End"
+            x2="70"
+            y2="70"
+            class="warning-color"
+            stroke-width="2"
+            stroke-dashoffset="0"
+            stroke-dasharray="24,65" />
+
+        <text x="70" y="56" text-anchor="middle" class="small-text-color" font-size="11px">FLOW</text>
+        <text x="70" y="80" text-anchor="middle" class="small-text-color" font-size="20px">{{ encoderFlowRate }}%</text>
+        <text
+            v-if="encoderDetectionMode === 2"
+            x="70"
+            y="124"
+            text-anchor="middle"
+            class="small-text-color"
+            font-size="12px">
+            Auto
+        </text>
+        <text x="30" y="136" text-anchor="end" class="small-text-color" font-size="12px">
+            {{ encoderDetectionLength }}
+        </text>
+        <text x="108" y="136" class="small-text-color" font-size="12px">0</text>
+    </svg>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+
+@Component({})
+export default class MmuClogMeter extends Mixins(BaseMixin, MmuMixin) {
+    @Prop({ default: 1 }) readonly rotationTime!: number
+
+    private circumference: number = 2 * Math.PI * 50
+    private dialArc: number = this.circumference * (60 / 360)
+    private dashOffset: number = this.circumference
+
+    private x1Start: number = 70 + 65 * Math.cos((120 * Math.PI) / 180)
+    private y1Start: number = 70 + 65 * Math.sin((120 * Math.PI) / 180)
+    private x1End: number = 70 + 65 * Math.cos((60 * Math.PI) / 180)
+    private y1End: number = 70 + 65 * Math.sin((60 * Math.PI) / 180)
+
+    x1MinHeadroom: number = 70 + 66 * Math.cos(((120 + 0) * Math.PI) / 180)
+    y1MinHeadroom: number = 70 + 66 * Math.sin(((120 + 0) * Math.PI) / 180)
+    headroomWarning: boolean = false
+
+    get headroomArc(): number {
+        return this.circumference * (1 - (this.encoderDesiredHeadroom / this.encoderDetectionLength) * (300 / 360))
+    }
+
+    get headroomRotate(): number {
+        return 420 - (this.encoderDesiredHeadroom / this.encoderDetectionLength) * 300
+    }
+
+    @Watch('$store.state.printer.mmu.encoder.headroom')
+    onHeadroomChanged(newHeadroom: number): void {
+        const clogPercent =
+            (Math.min(Math.max(0, this.encoderDetectionLength - newHeadroom), this.encoderDetectionLength) /
+                this.encoderDetectionLength) *
+            100
+        const offset = ((100 - (clogPercent * 300) / 360) / 100) * this.circumference
+        this.animateMeter(offset)
+    }
+
+    @Watch('$store.state.printer.mmu.encoder.min_headroom')
+    onMinHeadroomChanged(newMinHeadroom: number): void {
+        const clogPercent =
+            (Math.min(Math.max(0, this.encoderDetectionLength - newMinHeadroom), this.encoderDetectionLength) /
+                this.encoderDetectionLength) *
+            100
+        const angle = clogPercent * 3
+        this.x1MinHeadroom = 70 + 66 * Math.cos(((120 + angle) * Math.PI) / 180)
+        this.y1MinHeadroom = 70 + 66 * Math.sin(((120 + angle) * Math.PI) / 180)
+        this.headroomWarning = newMinHeadroom < this.encoderDesiredheadroom
+    }
+
+    private animateMeter(newOffset: number) {
+        const circle = this.$refs.dialCircle as SVGElement
+        const currentOffset = parseFloat(getComputedStyle(circle).strokeDashoffset) ?? this.circumference
+        const difference = Math.abs(currentOffset - newOffset)
+        const duration = (difference / this.circumference) * this.rotationTime
+        //const duration = this.rotationTime
+        circle.style.transition = `stroke-dashoffset ${duration}s ease-out`
+        this.dashOffset = newOffset
+    }
+}
+</script>
+
+<style scoped>
+.disabled-clog {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.primary-color {
+    stroke: var(--v-primary-lighten1, #2ca9bc);
+}
+.warning-color {
+    stroke: var(--v-error-base, #ff0000);
+}
+.small-text-color {
+    fill: var(--v-primary-lighten1, #2ca9bc);
+}
+</style>
diff --git a/src/components/panels/Mmu/MmuControls.vue b/src/components/panels/Mmu/MmuControls.vue
new file mode 100644
index 000000000..cc29894e2
--- /dev/null
+++ b/src/components/panels/Mmu/MmuControls.vue
@@ -0,0 +1,263 @@
+<template>
+    <v-container class="d-flex flex-column">
+        <v-row dense>
+            <v-col cols="6">
+                <v-tooltip top color="secondary">
+                    <template #activator="{ on }">
+                        <v-btn
+                            ref="refBtn"
+                            block
+                            small
+                            color="secondary"
+                            :class="btnClass"
+                            :disabled="
+                                !canSend || [GATE_AVAILABLE, GATE_AVAILABLE_FROM_BUFFER].includes(currentGateStatus)
+                            "
+                            :loading="loadings.includes('mmu_preload')"
+                            v-on="showTooltip ? on : {}"
+                            @click="doLoadingSend('MMU_PRELOAD', 'mmu_preload')">
+                            <v-icon left>{{ mdiDownloadOutline }}</v-icon>
+                            {{ $t('Panels.MmuPanel.ButtonPreload') }}
+                        </v-btn>
+                    </template>
+                    {{ $t('Panels.MmuPanel.ButtonPreload') }}
+                </v-tooltip>
+            </v-col>
+            <v-col cols="6">
+                <v-tooltip top color="secondary">
+                    <template #activator="{ on }">
+                        <v-btn
+                            block
+                            small
+                            color="secondary"
+                            :class="btnClass"
+                            :disabled="!canSend || [GATE_EMPTY].includes(currentGateStatus)"
+                            :loading="loadings.includes('mmu_eject')"
+                            v-on="showTooltip ? on : {}"
+                            @click="doLoadingSend('MMU_EJECT', 'mmu_eject')">
+                            <v-icon left>{{ mdiEject }}</v-icon>
+                            {{ $t('Panels.MmuPanel.ButtonEject') }}
+                        </v-btn>
+                    </template>
+                    {{ $t('Panels.MmuPanel.ButtonEject') }}
+                </v-tooltip>
+            </v-col>
+        </v-row>
+        <v-row dense>
+            <v-col cols="6">
+                <v-tooltip top color="secondary">
+                    <template #activator="{ on }">
+                        <v-btn
+                            block
+                            small
+                            color="secondary"
+                            :class="btnClass"
+                            :disabled="!canSend"
+                            :loading="loadings.includes('mmu_check_gate')"
+                            v-on="showTooltip ? on : {}"
+                            @click="doLoadingSend('MMU_CHECK_GATE', 'mmu_check_gate')">
+                            <v-icon left>{{ mdiCheck }}</v-icon>
+                            {{ $t('Panels.MmuPanel.ButtonCheckGate') }}
+                        </v-btn>
+                    </template>
+                    {{ $t('Panels.MmuPanel.ButtonCheckGate') }}
+                </v-tooltip>
+            </v-col>
+            <v-col cols="6">
+                <v-tooltip top color="secondary">
+                    <template #activator="{ on }">
+                        <v-btn
+                            block
+                            small
+                            color="secondary"
+                            :class="btnClass"
+                            :disabled="!canSend"
+                            :loading="loadings.includes('mmu_recover')"
+                            v-on="showTooltip ? on : {}"
+                            @click="doLoadingSend('MMU_RECOVER', 'mmu_recover')">
+                            <v-icon left>{{ mdiAutoFix }}</v-icon>
+                            {{ $t('Panels.MmuPanel.ButtonRecover') }}
+                        </v-btn>
+                    </template>
+                    {{ $t('Panels.MmuPanel.ButtonRecover') }}
+                </v-tooltip>
+            </v-col>
+        </v-row>
+        <v-row dense>
+            <v-col cols="2"></v-col>
+            <v-col cols="8">
+                <v-tooltip top color="secondary">
+                    <template #activator="{ on }">
+                        <v-btn
+                            block
+                            small
+                            color="secondary"
+                            :class="btnClass"
+                            :disabled="!canSend || !isMmuPausedAndLocked"
+                            :loading="loadings.includes('mmu_unlock')"
+                            v-on="showTooltip ? on : {}"
+                            @click="doLoadingSend('MMU_UNLOCK', 'mmu_unlock')">
+                            <v-icon left>{{ mdiThermometerPlus }}</v-icon>
+                            {{ $t('Panels.MmuPanel.ButtonUnlock') }}
+                        </v-btn>
+                    </template>
+                    {{ $t('Panels.MmuPanel.ButtonUnlock') }}
+                </v-tooltip>
+            </v-col>
+            <v-col cols="2"></v-col>
+        </v-row>
+        <v-row>
+            <v-col cols="6">
+                <v-tooltip top color="secondary">
+                    <template #activator="{ on }">
+                        <v-btn
+                            large
+                            block
+                            color="secondary"
+                            class="wrap-text-btn"
+                            :class="btnClass"
+                            :disabled="!canSend || filamentPos === FILAMENT_POS_UNLOADED"
+                            :loading="loadings.includes('mmu_unload')"
+                            v-on="showTooltip ? on : {}"
+                            @click="doLoadingSend('MMU_UNLOAD', 'mmu_unload')">
+                            <v-icon left>{{ mdiUpload }}</v-icon>
+                            {{ unloadButtonText }}
+                        </v-btn>
+                    </template>
+                    {{ unloadButtonText }}
+                </v-tooltip>
+            </v-col>
+            <v-col cols="6">
+                <v-tooltip top color="secondary">
+                    <template #activator="{ on }">
+                        <v-btn
+                            large
+                            block
+                            color="secondary"
+                            class="wrap-text-btn"
+                            :class="btnClass"
+                            :disabled="!canSend || filamentPos !== FILAMENT_POS_UNLOADED"
+                            :loading="loadings.includes('mmu_load')"
+                            v-on="showTooltip ? on : {}"
+                            @click="doLoadingSend('MMU_LOAD', 'mmu_load')">
+                            <v-icon left>{{ mdiDownload }}</v-icon>
+                            {{ loadButtonText }}
+                        </v-btn>
+                    </template>
+                    {{ loadButtonText }}
+                </v-tooltip>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Debounce } from 'vue-debounce-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+import { mdiDownloadOutline, mdiEject, mdiCheck, mdiAutoFix, mdiThermometerPlus, mdiDownload, mdiUpload } from '@mdi/js'
+
+@Component({})
+export default class MmuControls extends Mixins(BaseMixin, MmuMixin) {
+    mdiDownloadOutline = mdiDownloadOutline
+    mdiEject = mdiEject
+    mdiCheck = mdiCheck
+    mdiAutoFix = mdiAutoFix
+    mdiThermometerPlus = mdiThermometerPlus
+    mdiUpload = mdiUpload
+    mdiDownload = mdiDownload
+
+    private btnSize: number = 2
+
+    get unloadButtonText() {
+        if (this.gate === this.TOOL_GATE_BYPASS) return this.$t('Panels.MmuPanel.ButtonUnloadExt')
+        return this.$t('Panels.MmuPanel.ButtonUnload')
+    }
+
+    get loadButtonText() {
+        if (this.gate === this.TOOL_GATE_BYPASS) return this.$t('Panels.MmuPanel.ButtonLoadExt')
+        return this.$t('Panels.MmuPanel.ButtonLoad')
+    }
+
+    @Debounce(500)
+    checkButtonWidth() {
+        this.$nextTick(() => {
+            const btn = this.$refs.refBtn
+            if (btn) {
+                const width = btn.$el.offsetWidth
+                if (width === 0) {
+                    this.btnSize = 2
+                } else if (width < 95) {
+                    this.btnSize = 0
+                } else if (width < 120) {
+                    this.btnSize = 1
+                } else {
+                    this.btnSize = 2
+                }
+            }
+        })
+    }
+
+    get btnClass(): string[] {
+        const classes = ['base-btn']
+        if (this.btnSize === 0) {
+            classes.push('btn-no-text')
+        } else if (this.btnSize === 1) {
+            classes.push('btn-small-text')
+        }
+        return classes
+    }
+
+    get showTooltip(): boolean {
+        return this.btnSize === 0
+    }
+
+    get currentGateStatus(): number {
+        return this.$store.state.printer.mmu?.gate_status?.[this.gate] ?? -1
+    }
+
+    @Watch('$store.state.gui.view.mmu.largeFilamentStatus')
+    onFilamentStatusSizeChange(): void {
+        this.checkButtonWidth()
+    }
+
+    mounted() {
+        this.checkButtonWidth()
+        window.addEventListener('resize', this.checkButtonWidth)
+    }
+
+    beforeDestroy() {
+        window.removeEventListener('resize', this.checkButtonWidth)
+    }
+}
+</script>
+
+<style scoped>
+.base-btn {
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.wrap-text-btn {
+    min-height: 3em;
+    display: inline-block;
+    white-space: normal;
+}
+
+.btn-small-text {
+    font-size: 0.6em;
+}
+
+.btn-small-text .v-icon {
+    margin-right: 2px;
+}
+
+.btn-no-text {
+    font-size: 0;
+}
+
+.btn-no-text .v-icon {
+    margin-right: 0;
+}
+</style>
diff --git a/src/components/panels/Mmu/MmuFilamentStatus.vue b/src/components/panels/Mmu/MmuFilamentStatus.vue
new file mode 100644
index 000000000..c00e2012b
--- /dev/null
+++ b/src/components/panels/Mmu/MmuFilamentStatus.vue
@@ -0,0 +1,680 @@
+<template>
+    <svg ref="filStatusSvg" viewBox="140 20 285 421" preserveAspectRatio="xMidYMid meet">
+        <defs>
+            <g
+                id="sync-feedback"
+                :style="'stroke:' + colorOutline + '; stroke-linecap: round; stroke-linejoin: round; fill: none;'">
+                <path d="M18,9,13.78,3.39a1,1,0,0,0-1.56,0L8,9" style="stroke-width: 1; stroke-opacity: 0.8"></path>
+                <path d="M13,8.24,18,15H15H8Z" style="stroke-width: 2"></path>
+            </g>
+
+            <g
+                id="sissors"
+                :style="'stroke:' + colorOutline + ';fill: none; stroke-linecap: round; stroke-linejoin: round;'">
+                <path
+                    d="M8.8,7.72c-.6,1.21-2.34,1.64-3.89,1S2.6,6.48,3.2,5.28s2.34-1.64,3.89-1S9.4,6.52,8.8,7.72Zm-3.89,1L21,16M7.09,19.68c-1.55.68-3.29.25-3.89-1s.17-2.73,1.71-3.4,3.29-.25,3.89,1S8.63,19,7.09,19.68ZM21,8,4.91,15.32"
+                    style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2"></path>
+                <line x1="31" y1="12.5" x2="44" y2="12.5" style="stroke-width: 1; stroke-dasharray: 2, 2" />
+            </g>
+
+            <g id="sync-extruder">
+                <g
+                    style="
+                        stroke: none;
+                        stroke-width: 2;
+                        stroke-dasharray: none;
+                        stroke-linecap: round;
+                        stroke-linejoin: round;
+                        stroke-miterlimit: 4;
+                    ">
+                    <rect style="fill: rgb(131, 148, 150)" x="145" y="506" width="710" height="256" />
+                    <rect style="fill: rgb(147, 161, 161)" x="324" y="506" width="355" height="256" />
+                    <rect style="fill: rgb(101, 123, 131)" x="274" y="364" width="455" height="142" />
+                    <rect style="fill: rgb(88, 110, 117)" x="181" y="222" rx="28" ry="28" width="639" height="142" />
+                    <rect style="fill: rgb(88, 110, 117)" x="181" y="108" width="639" height="142" />
+                    <path style="fill: rgb(88, 110, 117)" d="m 322 762 h 355 l -118 142 h -118 z" />
+                </g>
+                <g transform="matrix(23.2058 0 0 23.2058 329.7195 325.9517)">
+                    <path
+                        style="
+                            stroke: rgb(0, 0, 0);
+                            stroke-width: 0;
+                            stroke-dasharray: none;
+                            stroke-linecap: butt;
+                            stroke-dashoffset: 0;
+                            stroke-linejoin: miter;
+                            stroke-miterlimit: 4;
+                            is-custom-font: none;
+                            font-file-url: none;
+                            fill: rgb(254, 162, 54);
+                            fill-rule: nonzero;
+                            opacity: 1;
+                        "
+                        vector-effect="non-scaling-stroke"
+                        transform=" translate(-15.4288, -16.4198)"
+                        stroke-linecap="round"
+                        d="M 25.032 26.16 c 2.884 -2.883 4.184 -6.74 3.928 -10.51 c -1.511 0.013 -3.021 0.021 -4.531 0.034 c 0.254 2.599 -0.603 5.287 -2.594 7.277 c -3.535 3.533 -9.263 3.533 -12.796 0 c -3.534 -3.533 -3.534 -9.26 0 -12.794 c 3.015 -3.016 7.625 -3.446 11.109 -1.314 c -1.181 1.167 -2.57 2.549 -2.57 2.549 c -1 1.062 0.016 1.766 0.69 1.77 h 8.828 c 0.338 0 0.611 -0.274 0.612 -0.612 V 3.804 c 0.041 -0.825 -0.865 -1.591 -1.756 -0.7 c 0 0 -1.495 1.48 -2.533 2.509 C 18.112 1.736 10.634 2.175 5.841 6.967 c -5.3 5.3 -5.3 13.892 0 19.193 C 11.141 31.459 19.733 31.459 25.032 26.16 z" />
+                </g>
+            </g>
+            <g id="blob" style="stroke-linecap: round; stroke-linejoin: round">
+                <polygon points="0,0 -1,1 1,1 0,0" stroke-width="4" vector-effect="non-scaling-stroke" />
+                <polygon
+                    points="-0.1,0.3 -0.5,0.7 0.3,0.7 -0.1,0.3"
+                    stroke-width="1"
+                    stroke="white"
+                    fill="white"
+                    opacity="0.3"
+                    vector-effect="non-scaling-stroke" />
+            </g>
+        </defs>
+
+        <rect
+            x="150"
+            y="30"
+            width="265"
+            height="130"
+            :class="$vuetify.theme.dark ? 'zone-background-dark-theme' : 'zone-background-light-theme'"
+            rx="10"
+            ry="10" />
+        <rect
+            x="150"
+            y="333"
+            width="265"
+            height="66"
+            :class="$vuetify.theme.dark ? 'zone-background-dark-theme' : 'zone-background-light-theme'"
+            rx="10"
+            ry="10" />
+        <g :style="'stroke:' + colorOutline + '; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1;'">
+            <path
+                d="M242 25 L242 405 L249 411 L251 411 L258 405 L258 25"
+                style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1"></path>
+        </g>
+
+        <rect
+            ref="filamentRect"
+            x="243"
+            y="25"
+            width="14"
+            :height="filamentRectHeight"
+            :fill="currentGateColor"
+            :class="tipFormingClass" />
+        <polygon v-if="upperNozzleFull" points="257,380 243,380 243,396 257,396" :fill="upperNozzleColor" />
+        <polygon
+            v-if="lowerNozzleFull"
+            points="257,396 243,396 243,405 249,412 249,413 251,413 251,412 257,405"
+            :fill="lowerNozzleColor" />
+
+        <g
+            :style="
+                'stroke:' +
+                colorOutline +
+                '; fill:' +
+                colorFont +
+                '; stroke-linejoin: round; stroke-width: 0; font-family: Roboto; font-size: 16;'
+            ">
+            <g v-if="hasSensor('mmu_pre_gate')">
+                <circle cx="258" cy="50" r="8" style="stroke-width: 1" :class="sensorClass('mmu_pre_gate')" />
+                <text x="278" y="55" :class="{ 'text-disabled': !isSensorEnabled('mmu_pre_gate') }">Pre-Gate</text>
+            </g>
+
+            <g v-if="hasSensor('mmu_gear')">
+                <circle cx="258" cy="80" r="8" style="stroke-width: 1" :class="sensorClass('mmu_gear')" />
+                <text x="278" y="85" :class="{ 'text-disabled': !isSensorEnabled('mmu_gear') }">Gear</text>
+                <text v-if="homedToGear" x="219.5" y="85" font-weight="bold">H</text>
+            </g>
+
+            <g v-if="hasSensor('mmu_gate')">
+                <circle cx="258" cy="110" r="8" style="stroke-width: 1" :class="sensorClass('mmu_gate')" />
+                <text x="278" y="115" :class="{ 'text-disabled': !isSensorEnabled('mmu_gate') }">Gate</text>
+                <transition name="fade">
+                    <text v-if="homedToGate" x="219.5" y="115" font-weight="bold">H</text>
+                </transition>
+            </g>
+
+            <g v-if="hasEncoder">
+                <circle cx="258" cy="140" r="8" style="stroke-width: 1" :class="encoderClass" />
+                <path d="M257 135 L261 140 L257 145" stroke-width="2" fill="none" />
+                <text x="278" y="145">Encoder</text>
+                <text x="345" y="145" font-size="11px">{{ encoderPosText }}</text>
+                <transition name="fade">
+                    <text v-if="homedToEncoder" x="219.5" y="145" font-weight="bold">H</text>
+                </transition>
+            </g>
+
+            <g v-if="hasSensor('extruder')">
+                <circle cx="258" cy="320" r="8" style="stroke-width: 1" :class="sensorClass('extruder')" />
+                <text x="278" y="325" :class="{ 'text-disabled': !isSensorEnabled('extruder') }">Extruder</text>
+                <transition name="fade">
+                    <text v-if="homedToExtruder" x="219.5" y="325" font-weight="bold">H</text>
+                </transition>
+            </g>
+
+            <transition name="fade">
+                <text v-if="homedToExtruderEntrance" x="219.5" y="339" font-weight="bold">H</text>
+            </transition>
+
+            <g v-if="hasSensor('toolhead')">
+                <circle cx="258" cy="350" r="8" style="stroke-width: 1" :class="sensorClass('toolhead')" />
+                <text x="278" y="355" :class="{ 'text-disabled': !isSensorEnabled('toolhead') }">Toolhead</text>
+                <transition name="fade">
+                    <text v-if="homedToToolhead" x="219.5" y="355" font-weight="bold">H</text>
+                </transition>
+            </g>
+
+            <text x="228" y="412" font-size="11px" font-weight="bold" text-anchor="end" :class="temperatureClass">
+                {{ temperatureText }}
+            </text>
+
+            <g v-if="hasSyncFeedback">
+                <transition name="fade">
+                    <g v-if="isSensorTriggered('filament_tension')" key="tension">
+                        <use xlink:href="#sync-feedback" transform="translate(258, 199) scale(1.2)" />
+                        <use xlink:href="#sync-feedback" transform="translate(258, 271) scale(1.2,-1.2)" />
+                    </g>
+                </transition>
+                <transition name="fade">
+                    <g v-if="isSensorTriggered('filament_compression')" key="compression">
+                        <use xlink:href="#sync-feedback" transform="translate(258, 235) scale(1.2)" />
+                        <use xlink:href="#sync-feedback" transform="translate(258, 235) scale(1.2,-1.2)" />
+                    </g>
+                </transition>
+                <transition name="fade">
+                    <g
+                        v-if="isSensorTriggered('filament_tension') || isSensorTriggered('filament_compression')"
+                        key="feedback">
+                        style="font-size: 14px"
+                        <text
+                            v-if="isSensorTriggered('filament_tension') && isSensorTriggered('filament_compression')"
+                            x="288"
+                            y="240"
+                            fill="#FF0000">
+                            Error!
+                        </text>
+                        <text v-else-if="isSensorTriggered('filament_tension')" x="288" y="240">Tension</text>
+                        <text v-else-if="isSensorTriggered('filament_compression')" x="288" y="240">Compression</text>
+                    </g>
+                </transition>
+            </g>
+            <text x="160" y="60" :class="tool === -2 ? 'tool-bypass' : 'tool-text'">{{ toolText(tool) }}</text>
+        </g>
+
+        <transition name="fade">
+            <use v-if="!syncDrive" ref="sync" xlink:href="#sync-extruder" transform="translate(278, 385) scale(.030)" />
+        </transition>
+
+        <use v-if="action == ACTION_CUTTING_FILAMENT" ref="cut" xlink:href="#sissors" class="cut1-effect" />
+        <use v-if="action == ACTION_CUTTING_TIP" ref="cutTip" xlink:href="#sissors" class="cut2-effect" />
+
+        <use
+            v-if="action == ACTION_PURGING"
+            ref="poop"
+            xlink:href="#blob"
+            class="blob-effect"
+            :stroke="lowerNozzleColor"
+            :fill="lowerNozzleColor" />
+    </svg>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+
+@Component({})
+export default class MmuFilamentStatus extends Mixins(BaseMixin, MmuMixin) {
+    @Prop({ default: 0.7 }) readonly animationTime!: number
+
+    private filamentRectHeight: number = 0
+    private tipFormingClass: string = ''
+
+    readonly POSITIONS = {
+        unknown: 8,
+        'before-pre-gate': 20,
+        'pre-gate': 25,
+        'after-pre-gate': 40,
+        'before-gear': 50,
+        gear: 55,
+        'after-gear': 70,
+        gate: 85,
+        'after-gate': 100,
+        encoder: 115,
+        'start-bowden': 135,
+        'mid-bowden': 221,
+        'end-bowden': 290,
+        extruder: 295,
+        'extruder-entrance': 308,
+        'before-toolhead': 315,
+        toolhead: 325,
+        'cooling-tube': 338,
+        'cut-point': 355,
+        'nozzle-start': 371,
+    } as const
+
+    readonly BOWDEN_RANGE = 173 as const
+
+    @Watch('$store.state.printer.mmu.bowden_progress')
+    onBowdenProgress(): void {
+        // Percentage movement in the bowden
+        this.calcFilamentHeight(this.filamentPos)
+    }
+
+    @Watch('$store.state.printer.mmu.filament_pos')
+    onFilamentPosChanged(newPos: number): void {
+        // Filament position state
+        this.calcFilamentHeight(newPos)
+    }
+
+    @Watch('$store.state.printer.mmu.sensors')
+    onSensorsChanged(): void {
+        // Update on sensor change
+        this.calcFilamentHeight(this.filamentPos)
+    }
+
+    @Watch('$store.state.printer.mmu.action')
+    onActionChanged(action: number): void {
+        // Action being performed
+        if (action === this.ACTION_FORMING_TIP) {
+            this.tipFormingClass = 'form-tip-effect'
+        } else {
+            if (this.tipFormingClass) {
+                this.$nextTick(() => {
+                    this.animateFilament(this.POSITIONS['cooling-tube'], 1)
+                })
+            }
+            this.tipFormingClass = ''
+        }
+    }
+
+    get colorOutline(): string {
+        return '#2CA9BC'
+    }
+    get colorOutlineContrast(): string {
+        return '#222222'
+    }
+    get colorFont(): string {
+        return '#FFFFFF'
+    }
+
+    private calcFilamentHeight(filamentPos: number): void {
+        let pos = 0
+
+        if (this.gate === this.TOOL_GATE_BYPASS) {
+            // Bypass use case places more emphasis on sensors
+            switch (filamentPos) {
+                case this.FILAMENT_POS_EXTRUDER_ENTRY:
+                    pos = this.POSITIONS['before-toolhead']
+                    break
+
+                case this.FILAMENT_POS_HOMED_TS:
+                    pos = this.POSITIONS['toolhead']
+                    break
+
+                case this.FILAMENT_POS_IN_EXTRUDER:
+                    pos = this.POSITIONS['cooling-tube']
+                    break
+
+                case this.FILAMENT_POS_LOADED:
+                    pos = this.POSITIONS['nozzle-start']
+                    break
+
+                default:
+                    // For everything else, rely on sensors
+                    if (this.isSensorTriggered('toolhead')) {
+                        pos = this.POSITIONS['toolhead']
+                    } else if (this.isSensorTriggered('extruder')) {
+                        pos = this.POSITIONS['extruder']
+                    } else if (this.isSensorTriggered('mmu_gear')) {
+                        pos = this.POSITIONS['after-gear']
+                    } else if (this.isSensorTriggered('mmu_pre_gate')) {
+                        pos = this.POSITIONS['after-pre-gate']
+                    } else {
+                        pos = this.POSITIONS['before-pre-gate']
+                    }
+                    break
+            }
+        } else {
+            // Normal MMU use case leveraging state machine
+            switch (filamentPos) {
+                case this.FILAMENT_POS_UNLOADED:
+                    if (this.isSensorTriggered('mmu_gear')) {
+                        pos = this.POSITIONS['after-gear']
+                    } else if (this.isSensorTriggered('mmu_pre_gate')) {
+                        pos = this.POSITIONS['after-pre-gate']
+                    } else {
+                        pos = this.POSITIONS['before-pre-gate']
+                    }
+                    break
+
+                case this.FILAMENT_POS_HOMED_GATE:
+                    if (this.configGateHomingEndstop === 'mmu_gear') {
+                        pos = this.POSITIONS['gear']
+                    } else if (this.configGateHomingEndstop === 'mmu_gate') {
+                        pos = this.POSITIONS['gate']
+                    } else if (this.configGateHomingEndstop === 'extruder') {
+                        pos = this.POSITIONS['extruder'] // Special no-bowden case
+                    } else {
+                        pos = this.POSITIONS['after-gate']
+                    }
+                    break
+
+                // TODO: State not yet implmented in Happy Hare
+                //case this.FILAMENT_POS_HOMED_ENCODER:
+                //    pos = this.POSITIONS['encoder']
+                //    break
+
+                case this.FILAMENT_POS_START_BOWDEN:
+                    if (this.bowdenProgress >= 0) {
+                        pos = this.POSITIONS['start-bowden'] + (this.BOWDEN_RANGE * this.bowdenProgress) / 100
+                    } else {
+                        pos = this.POSITIONS['start-bowden']
+                    }
+                    break
+
+                case this.FILAMENT_POS_IN_BOWDEN:
+                    if (this.bowdenProgress >= 0) {
+                        pos = this.POSITIONS['start-bowden'] + (this.BOWDEN_RANGE * this.bowdenProgress) / 100
+                    } else {
+                        pos = this.POSITIONS['mid-bowden']
+                    }
+                    break
+
+                case this.FILAMENT_POS_END_BOWDEN:
+                    if (
+                        this.configGateHomingEndstop === 'none' ||
+                        (this.hasSensor('toolhead') &&
+                            this.isSensorEnabled('toolhead') &&
+                            !this.configExtruderForceHoming)
+                    ) {
+                        // No extruder homing will be performed so indicate at the extruder now
+                        pos = this.POSITIONS['extruder-entrance']
+                    } else {
+                        pos = this.POSITIONS['end-bowden']
+                    }
+                    break
+
+                case this.FILAMENT_POS_HOMED_ENTRY:
+                    pos = this.POSITIONS['extruder']
+                    break
+
+                case this.FILAMENT_POS_HOMED_EXTRUDER:
+                    pos = this.POSITIONS['extruder-entrance']
+                    break
+
+                case this.FILAMENT_POS_EXTRUDER_ENTRY:
+                    pos = this.POSITIONS['before-toolhead']
+                    break
+
+                case this.FILAMENT_POS_HOMED_TS:
+                    pos = this.POSITIONS['toolhead']
+                    break
+
+                case this.FILAMENT_POS_IN_EXTRUDER:
+                    pos = this.POSITIONS['cooling-tube']
+                    break
+
+                case this.FILAMENT_POS_LOADED:
+                    pos = this.POSITIONS['nozzle-start']
+                    break
+
+                default: // this.FILAMENT_POS_UNKNOWN
+                    pos = this.POSITIONS['unknown']
+            }
+        }
+        this.animateFilament(pos)
+    }
+
+    private animateFilament(newHeight: number, animationTime: number = this.animationTime) {
+        const rect = this.$refs.filamentRect as SVGElement
+        if (rect) {
+            if (animationTime > 0) {
+                const currentHeight = parseFloat(getComputedStyle(rect).height) ?? this.POSITIONS['end-bowden']
+                const difference = Math.abs(currentHeight - newHeight)
+                const duration = Math.min((difference / this.BOWDEN_RANGE) * animationTime + 0.1, animationTime)
+                rect.style.transition = `height ${duration}s ease-in`
+            } else {
+                rect.style.transition = 'none'
+            }
+        }
+        this.filamentRectHeight = newHeight
+    }
+
+    get encoderPosText(): string {
+        if (this.encoderPos < 10000) return `${this.encoderPos} mm`
+        return this.encoderPos
+    }
+
+    get temperatureClass(): string {
+        const canExtrude = this.$store.state.printer.extruder?.can_extrude ?? false
+        if (canExtrude === false) return 'text-disabled'
+        return ''
+    }
+
+    get temperatureText(): string {
+        const extTemp = this.$store.state.printer.extruder?.temperature ?? null
+        if (extTemp) return `${extTemp.toFixed(0)}°C`
+        return ''
+    }
+
+    private hasSensor(sensorName: string): boolean {
+        return sensorName in this.sensors
+    }
+
+    private isSensorEnabled(sensorName: string): boolean {
+        return this.sensors[sensorName] !== null
+    }
+
+    private isSensorTriggered(sensorName: string): boolean {
+        const value = this.sensors[sensorName]
+        return value !== null && value === true
+    }
+
+    sensorClass(sensorName: string): string {
+        if (!this.isSensorEnabled(sensorName)) {
+            return sensorName === 'extruder' ? 'sensor-disabled-extruder' : 'sensor-disabled'
+        } else {
+            return this.isSensorTriggered(sensorName)
+                ? 'sensor-triggered'
+                : sensorName === 'extruder'
+                  ? 'sensor-open-extruder'
+                  : 'sensor-open'
+        }
+    }
+
+    get encoderClass(): string {
+        // TODO: Need to separate encoder runout disable from general availability (like other sensors)
+        if (this.filamentPos === this.FILAMENT_POS_UNLOADED) return 'sensor-disabled'
+        return this.encoderPos ? 'sensor-triggered' : 'sensor-open'
+    }
+
+    get hasSyncFeedback(): boolean {
+        return (
+            this.syncFeedbackEnabled && (this.hasSensor('filament_compression') || this.hasSensor('filament_tension'))
+        )
+    }
+
+    get homedToEncoder(): boolean {
+        if (this.filamentDirection === this.DIRECTION_LOAD) {
+            return this.configGateHomingEndstop === 'encoder' && this.filamentPos === this.FILAMENT_POS_START_BOWDEN
+        } else {
+            return this.configGateHomingEndstop === 'encoder' && this.filamentPos === this.FILAMENT_POS_START_BOWDEN
+        }
+    }
+
+    get homedToGear(): boolean {
+        return this.configGateHomingEndstop === 'mmu_gear' && this.filamentPos === this.FILAMENT_POS_HOMED_GATE
+    }
+
+    get homedToGate(): boolean {
+        return this.configGateHomingEndstop === 'mmu_gate' && this.filamentPos === this.FILAMENT_POS_HOMED_GATE
+    }
+
+    get homedToExtruder(): boolean {
+        return this.filamentPos === this.FILAMENT_POS_HOMED_ENTRY
+    }
+
+    get homedToExtruderEntrance(): boolean {
+        return this.filamentPos === this.FILAMENT_POS_HOMED_EXTRUDER
+    }
+
+    get homedToToolhead(): boolean {
+        return this.filamentPos === this.FILAMENT_POS_HOMED_TS
+    }
+
+    get upperNozzleFull(): boolean {
+        return this.filamentPos === this.FILAMENT_POS_LOADED || this.varsFilamentRemaining
+    }
+
+    get lowerNozzleFull(): boolean {
+        return (
+            this.filamentPos === this.FILAMENT_POS_LOADED ||
+            this.varsFilamentRemaining ||
+            this.varsFilamentRemainingColor
+        )
+    }
+
+    get upperNozzleColor(): string {
+        if (this.varsFilamentRemaining) return this.varsFilamentRemainingColor
+        return 'none'
+    }
+
+    get lowerNozzleColor(): string {
+        if (this.varsFilamentRemainingColor) return this.varsFilamentRemainingColor
+        return this.currentGateColor
+    }
+
+    get currentGateColor(): string {
+        let color = this.$store.state.printer.mmu?.gate_color[this.gate] ?? ''
+        if (this.gate === this.TOOL_GATE_BYPASS) {
+            // Assume active spoolman spool if available
+            color = this.$store.state.server.spoolman?.active_spool?.filament.color_hex ?? null
+        }
+        return this.formColorString(color)
+    }
+
+    mounted() {
+        this.calcFilamentHeight(this.filamentPos)
+    }
+}
+</script>
+
+<style scoped>
+.text-disabled {
+    opacity: 0.5;
+}
+
+.zone-background-light-theme {
+    fill: #f0f0f0;
+}
+
+.zone-background-dark-theme {
+    fill: #2c2c2c;
+}
+
+svg text {
+    fill: currentColor;
+}
+
+.sensor-disabled {
+    stroke: var(--v-secondary-lighten3, #808080);
+    stroke-dasharray: 2, 1;
+    fill: #2c2c2c;
+}
+
+.sensor-triggered {
+    fill: limegreen;
+}
+
+.sensor-open {
+    fill: #2c2c2c;
+}
+
+.sensor-disabled-extruder {
+    stroke: var(--v-secondary-lighten3, #808080);
+    stroke-dasharray: 2, 1;
+    fill: var(--v-secondary-darken2, #1e1e1e);
+}
+
+.sensor-open-extruder {
+    fill: var(--v-secondary-darken2, #1e1e1e);
+}
+
+.tool-text {
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.tool-bypass {
+    font-size: 16px;
+    font-weight: normal;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.8s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+@keyframes fadeInOut {
+    0%,
+    100% {
+        opacity: 0;
+        transform: translate(250px, 414px) scale(1);
+    }
+    90% {
+        opacity: 1;
+        transform: translate(250px, 414px) scale(16);
+    }
+}
+.blob-effect {
+    animation: fadeInOut 4s infinite;
+}
+
+@keyframes cut1 {
+    0%,
+    100% {
+        opacity: 0.5;
+        transform: translate(190px, 145px) scale(1.2);
+    }
+    30%,
+    70% {
+        opacity: 1;
+        transform: translate(205px, 145px) scale(1.2);
+    }
+}
+.cut1-effect {
+    animation: cut1 3s infinite;
+}
+
+@keyframes cut2 {
+    0%,
+    100% {
+        opacity: 0.5;
+        transform: translate(190px, 365px) scale(1.2);
+    }
+    30%,
+    70% {
+        opacity: 1;
+        transform: translate(205px, 365px) scale(1.2);
+    }
+}
+.cut2-effect {
+    animation: cut2 3s infinite;
+}
+
+@keyframes form-tip {
+    0%,
+    100% {
+        height: 371px;
+    }
+    50% {
+        height: 338px;
+    }
+}
+.form-tip-effect {
+    animation: form-tip 1s infinite;
+}
+</style>
diff --git a/src/components/panels/Mmu/MmuGateStatus.vue b/src/components/panels/Mmu/MmuGateStatus.vue
new file mode 100644
index 000000000..e1519be3f
--- /dev/null
+++ b/src/components/panels/Mmu/MmuGateStatus.vue
@@ -0,0 +1,82 @@
+<template>
+    <svg ref="mmuGateStatusSvg" viewBox="0 0 120 54" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
+        <rect
+            x="20"
+            y="18"
+            width="80"
+            height="31"
+            rx="8"
+            ry="8"
+            stroke-width="3"
+            :stroke="statusColor"
+            :fill="selectedColor" />
+        <text
+            v-if="gateIndex >= 0"
+            x="60"
+            y="44"
+            text-anchor="middle"
+            font-weight="bold"
+            font-size="30px"
+            :class="!editGateMap && gateIndex === gate ? 'selected-text' : 'regular-text'">
+            {{ gateIndex }}
+        </text>
+        <text
+            v-if="gateIndex === TOOL_GATE_BYPASS"
+            x="60"
+            y="41"
+            text-anchor="middle"
+            font-weight="bold"
+            font-size="20px"
+            :class="!editGateMap && gateIndex === gate ? 'selected-text' : 'regular-text'">
+            BYPASS
+        </text>
+    </svg>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+
+@Component({})
+export default class MmuGateStatus extends Mixins(BaseMixin, MmuMixin) {
+    @Prop({ required: true, default: -1 }) declare readonly gateIndex!: number
+    @Prop({ required: false, default: null }) readonly editGateMap!: MmuGateDetails[] | null
+    @Prop({ required: false, default: -1 }) readonly editGateSelected!: number
+
+    get statusColor(): string {
+        if (this.gateIndex < 0) return 'none'
+
+        let status = this.gateStatus[this.gateIndex]
+        if (this.editGateMap) status = this.editGateMap[this.gateIndex].status
+
+        if (status >= 1) {
+            return 'green'
+        } else if (status === 0) {
+            return '#808080'
+        }
+        return 'orange' // Unknown
+    }
+
+    get selectedColor(): string {
+        if (this.editGateMap) return 'none'
+
+        if (this.gate === this.gateIndex) {
+            return 'limegreen'
+        } else {
+            return 'none'
+        }
+    }
+}
+</script>
+
+<style scoped>
+.selected-text {
+    fill: #000000;
+}
+
+.regular-text {
+    fill: #c0c0c0;
+}
+</style>
diff --git a/src/components/panels/Mmu/MmuGateSummary.vue b/src/components/panels/Mmu/MmuGateSummary.vue
new file mode 100644
index 000000000..81fed0dfb
--- /dev/null
+++ b/src/components/panels/Mmu/MmuGateSummary.vue
@@ -0,0 +1,154 @@
+<template>
+    <v-list-item :lines="lines" :class="{ 'disabled-panel': details.status === 0 }">
+        <v-list-item-content :class="contentClass">
+            <div :class="toplineClass">{{ title }}</div>
+            <v-list-item-title :class="titleClass">
+                {{ name }}
+            </v-list-item-title>
+            <v-list-item-subtitle :class="subtitleClass">
+                {{ subtitle }}
+            </v-list-item-subtitle>
+            <v-list-item-subtitle v-if="showDetails" :class="detailsClass">
+                {{ extra }}
+            </v-list-item-subtitle>
+        </v-list-item-content>
+    </v-list-item>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+
+@Component({})
+export default class MmuGateSummary extends Mixins(BaseMixin, MmuMixin) {
+    @Prop({ required: true, default: -1 }) declare readonly gateIndex!: number
+    @Prop({ required: false, default: false }) readonly compact!: boolean
+    @Prop({ required: false, default: true }) readonly showDetails!: boolean
+    @Prop({ required: false, default: true }) readonly showGate!: boolean
+
+    get details(): MmuGateDetails {
+        return this.gateDetails(this.gateIndex)
+    }
+
+    get lines(): string {
+        if (this.showDetails) return 'three'
+        return 'two'
+    }
+
+    get title(): string {
+        return [this.showGate ? this.gateText(this.gate) : null, this.vendorText].filter((v) => v !== null).join(' | ')
+    }
+
+    get name(): string {
+        return this.details.filamentName
+    }
+
+    get subtitle(): string {
+        return [this.details.material, this.temperatureText, this.speedOverrideText]
+            .filter((v) => v !== null)
+            .join(' | ')
+    }
+
+    get extra(): string {
+        let text = [this.spoolIdText, this.weightText, this.lengthText].filter((v) => v !== null).join(' | ')
+        if (!text) return 'No spool ID'
+        return text
+    }
+
+    get speedOverrideText(): string {
+        if (this.details.speedOverride === 100) return null
+        return 'Speed: ' + this.details.speedOverride + '%'
+    }
+
+    get temperatureText(): string {
+        if (this.details.temperature <= 0) return null
+        return this.details.temperature + '\u00B0' + 'C'
+    }
+
+    get spoolIdText(): string {
+        if (this.details.spoolId <= 0) return null
+        return 'Spool ID: #' + this.details.spoolId
+    }
+
+    // Only available with Spoolman...
+
+    get vendorText() {
+        const spoolmanSpool = this.spoolmanSpool(this.details.spoolId)
+        return spoolmanSpool?.filament?.vendor?.name ?? 'Unknown'
+    }
+
+    get weightText() {
+        const spoolmanSpool = this.spoolmanSpool(this.details.spoolId)
+        const remaining = spoolmanSpool?.remaining_weight ?? null
+        const total = spoolmanSpool?.initial_weight ?? spoolmanSpool?.filament?.weight ?? null
+        if (remaining === null || total === null) return null
+
+        if (total >= 1000) {
+            let totalRound = Math.floor(total / 1000)
+            if (totalRound !== total / 1000) {
+                totalRound = Math.round(total / 100) / 10
+            }
+            return `${Math.round(remaining)}g / ${totalRound}kg`
+        }
+        return `${Math.round(remaining)} / ${Math.round(total)}g`
+    }
+
+    get lengthText() {
+        const spoolmanSpool = this.spoolmanSpool(this.details.spoolId)
+        let remaining = spoolmanSpool?.remaining_length ?? null
+        if (remaining === null) return null
+        return `${Math.round(remaining / 1000)}m`
+    }
+
+    get contentClass() {
+        if (this.compact) return ['my-0', 'smaller-font']
+        return 'my-0'
+    }
+
+    get toplineClass() {
+        if (this.compact) return ['text-overline', 'mb-1', 'reduced-line-height', 'small-overline-font']
+        return ['text-overline', 'reduced-line-height', 'mb-2']
+    }
+
+    get titleClass() {
+        if (this.compact) return ['text-h7', 'mb-1']
+        return ['text-h6', 'mb-1']
+    }
+
+    get subtitleClass() {
+        if (this.compact) return ['subtitle-container', ' smaller-font']
+        return ['subtitle-container']
+    }
+
+    get detailsClass() {
+        if (this.compact) return ['subtitle-container', ' smaller-font']
+        return ['subtitle-container', 'smaller-font']
+    }
+}
+</script>
+
+<style scoped>
+.reduced-line-height {
+    line-height: 1em;
+}
+
+.subtitle-container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.smaller-font {
+    font-size: 0.8em;
+}
+
+.small-overline-font {
+    line-height: 0.7em;
+    font-size: 0.7em !important;
+}
+
+.disabled-panel {
+    opacity: 0.5;
+}
+</style>
diff --git a/src/components/panels/Mmu/MmuMachine.vue b/src/components/panels/Mmu/MmuMachine.vue
new file mode 100644
index 000000000..2c64eb330
--- /dev/null
+++ b/src/components/panels/Mmu/MmuMachine.vue
@@ -0,0 +1,47 @@
+<template>
+    <v-container>
+        <v-row dense>
+            <v-col v-for="index in unitArray" :key="'unit_' + index" cols="auto">
+                <div :class="$vuetify.theme.dark ? 'mmu-unit-dark-theme' : 'mmu-unit-light-theme'">
+                    <mmu-unit
+                        :unit="index"
+                        :edit-gate-map="editGateMap"
+                        :edit-gate-selected="editGateSelected"
+                        @select-gate="selectGate" />
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+
+@Component({})
+export default class MmuMachine extends Mixins(BaseMixin, MmuMixin) {
+    @Prop({ required: false, default: null }) readonly editGateMap!: MmuGateDetails[] | null
+    @Prop({ required: false, default: -1 }) readonly editGateSelected!: number
+
+    get unitArray(): number[] {
+        return Array.from({ length: this.numUnits }, (_, k) => k)
+    }
+
+    private selectGate(gate: number): null {
+        this.$emit('select-gate', gate)
+    }
+}
+</script>
+
+<style scoped>
+.mmu-unit-light-theme {
+    border-radius: 10px;
+    background: #f0f0f0;
+}
+
+.mmu-unit-dark-theme {
+    border-radius: 10px;
+    background: #2c2c2c;
+}
+</style>
diff --git a/src/components/panels/Mmu/MmuPanelSettings.vue b/src/components/panels/Mmu/MmuPanelSettings.vue
new file mode 100644
index 000000000..3a3ed7ec0
--- /dev/null
+++ b/src/components/panels/Mmu/MmuPanelSettings.vue
@@ -0,0 +1,81 @@
+<template>
+    <v-menu :offset-y="true" :left="true" :close-on-content-click="false">
+        <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 v-if="hasEncoder" class="minHeight36">
+                <v-checkbox
+                    v-model="showClogDetection"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.MmuPanel.ShowClogDetection')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox v-model="showTtgMap" class="mt-0" hide-details :label="$t('Panels.MmuPanel.ShowTtgMap')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showDetails"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.MmuPanel.ShowDetails')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="largeFilamentStatus"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.MmuPanel.LargeFilamentStatus')" />
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+import { mdiCog } from '@mdi/js'
+
+@Component({})
+export default class MmuPanelSettings extends Mixins(BaseMixin, MmuMixin) {
+    mdiCog = mdiCog
+
+    get showClogDetection(): boolean {
+        return this.$store.state.gui.view.mmu.showClogDetection ?? true
+    }
+
+    set showClogDetection(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.mmu.showClogDetection', value: newVal })
+    }
+
+    get showTtgMap(): boolean {
+        return this.$store.state.gui.view.mmu.showTtgMap ?? true
+    }
+
+    set showTtgMap(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.mmu.showTtgMap', value: newVal })
+    }
+
+    get showDetails(): boolean {
+        return this.$store.state.gui.view.mmu.showDetails ?? true
+    }
+
+    set showDetails(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.mmu.showDetails', value: newVal })
+    }
+
+    get largeFilamentStatus(): boolean {
+        return this.$store.state.gui.view.mmu.largeFilamentStatus ?? true
+    }
+
+    set largeFilamentStatus(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.mmu.largeFilamentStatus', value: newVal })
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/panels/Mmu/MmuSpool.vue b/src/components/panels/Mmu/MmuSpool.vue
new file mode 100644
index 000000000..44473b6f3
--- /dev/null
+++ b/src/components/panels/Mmu/MmuSpool.vue
@@ -0,0 +1,156 @@
+<template>
+    <svg ref="mmuSpoolSvg" viewBox="0 0 248 500" preserveAspectRatio="xMidYMid meet">
+        <defs>
+            <path
+                id="oval"
+                d="M 0 -63 C 35 -63 63 -35 63 0 C 63 35 35 63 0 63 C -35 63 -63 35 -63 0 C -63 -35 -35 -63 0 -63 z"
+                vector-effect="non-scaling-stroke" />
+            <path
+                id="center"
+                d="M 0 -63 C 35 -63 63 -35 63 0 C 63 35 35 63 0 63 L -624 63 L -624 -63 z"
+                vector-effect="non-scaling-stroke" />
+            <path
+                id="espool"
+                d="M 89.561 35.5 L 60.333 15.734 c -0.308 -0.208 -0.704 -0.229 -1.029 -0.055 c -0.327 0.173 -0.531 0.513 -0.531 0.883 v 7.987 c -12.038 0.262 -26.306 5.201 -37.501 13.023 C 7.554 47.155 0 59.894 0 73.438 c 0 0.471 0.329 0.878 0.79 0.978 C 0.86 74.432 0.931 74.438 1 74.438 c 0.386 0 0.747 -0.225 0.911 -0.588 c 7.823 -17.312 26.952 -26.183 56.861 -26.376 v 8.62 c 0 0.37 0.204 0.71 0.531 0.883 c 0.325 0.173 0.722 0.153 1.029 -0.055 l 29.228 -19.766 C 89.835 36.971 90 36.661 90 36.329 S 89.835 35.686 89.561 35.5 z"
+                stroke-width="2"
+                stroke="#CCCCCC"
+                fill="#808080"
+                opacity="0.7" />
+        </defs>
+
+        <filter id="blur_wheel2" width="1.3" height="1.16">
+            <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+            <feOffset dx="18" dy="0" result="oBlur" />
+            <feFlood flood-color="#000" flood-opacity=".67" />
+            <feComposite in2="oBlur" operator="in" />
+            <feMerge>
+                <feMergeNode />
+                <feMergeNode in="SourceGraphic" />
+            </feMerge>
+        </filter>
+        <g transform="matrix(0.59,0,0,3.95,197,250)">
+            <use href="#oval" style="filter: url(#blur_wheel2)" :fill="spoolWheelColor" />
+            <use href="#oval" transform="scale(0.41)" style="filter: url(#blur_wheel2)" :fill="spoolWheelColor" />
+            <use href="#center" transform="scale(0.41)" :fill="spoolWheelColor" />
+        </g>
+        <path
+            v-if="filamentAmount !== 0"
+            ref="filament"
+            d="M 0 -63 C 35 -63 63 -35 63 0 C 63 35 35 63 0 63 L -424 63 L -424 -63 z"
+            vector-effect="non-scaling-stroke"
+            :fill="filamentColor"
+            :transform="'matrix(' + computedScale(0.28, 0.4) + ',0,0,' + computedScale(1.65, 3.5) + ',197,250)'" />
+        <g transform="matrix(0.59,0,0,3.95,37,250)">
+            <use href="#oval" style="filter: url(#blur_wheel2)" :fill="spoolWheelColor" />
+            <use href="#oval" transform="scale(0.41)" style="fill: #111111" />
+        </g>
+
+        <g v-if="!editGateMap">
+            <text
+                v-if="showPercent && filamentAmount > 0"
+                x="152"
+                y="270"
+                text-anchor="middle"
+                font-weight="bold"
+                font-size="56px"
+                :fill="contrastColor">
+                {{ filamentAmount }}%
+            </text>
+            <text
+                v-else-if="!showPercent && filamentAmount === 0"
+                x="140"
+                y="310"
+                text-anchor="middle"
+                font-weight="bold"
+                font-size="160px"
+                style="fill: red; stroke: #111111; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round">
+                !
+            </text>
+            <use
+                v-if="espoolerActive === 'rewind' && gateIndex === gate"
+                href="#espool"
+                transform="translate(225,0) rotate(90) scale(2,2)" />
+            <use
+                v-if="espoolerActive === 'assist' && gateIndex === gate"
+                href="#espool"
+                transform="translate(225,500) rotate(270) scale(2,-2)" />
+        </g>
+    </svg>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+
+@Component({})
+export default class MmuSpool extends Mixins(BaseMixin, MmuMixin) {
+    @Prop({ required: true, default: -1 }) declare readonly gateIndex!: number
+    @Prop({ required: false, default: '#AD8762' }) readonly spoolWheelColor: string
+    @Prop({ required: false, default: true }) readonly showPercent: boolean
+    @Prop({ required: false, default: null }) readonly editGateMap!: MmuGateDetails[] | null
+    @Prop({ required: false, default: -1 }) readonly editGateSelected!: number
+
+    contrastColor: string = 'black'
+
+    get details(): MmuGateDetails {
+        if (this.editGateMap) return this.editGateMap[this.gateIndex]
+        return this.gateDetails(this.gateIndex)
+    }
+
+    get filamentAmount(): number {
+        if (this.editGateMap) return 100
+        if (this.details.status === this.GATE_EMPTY) return 0
+
+        const spoolmanSpool = this.spoolmanSpool(this.details.spoolId)
+        if (!spoolmanSpool) return -1
+
+        const spoolmanSupport = this.$store.state.printer.mmu.spoolman_support
+        if (this.details.spoolId <= 0 || spoolmanSupport === 'off') return -1
+
+        // Pull live from spoolman and calculate percentage
+        const remaining = spoolmanSpool?.remaining_weight ?? null
+        const total = spoolmanSpool?.initial_weight ?? spoolmanSpool?.filament?.weight ?? null
+        if (remaining === null || total === null) return -1
+        return Math.round(Math.max(0, Math.min(100, (remaining / total) * 100)))
+    }
+
+    get filamentColor(): string {
+        // Need spool to be rendered first
+        this.$nextTick(() => {
+            this.computeContrastColor()
+        })
+        return this.details.color
+    }
+
+    computedScale(start, end) {
+        if (this.editGateMap || this.filamentAmount < 0) return end
+        return start + (end - start) * (this.filamentAmount / 100)
+    }
+
+    computeContrastColor(): void {
+        if (!this.$refs.filament) {
+            this.contrastColor = 'black'
+            return
+        }
+
+        const fillColor = window.getComputedStyle(this.$refs.filament).fill
+        const rgbaMatch = fillColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/)
+
+        if (rgbaMatch) {
+            const [r, g, b] = rgbaMatch.slice(1, 4).map(Number)
+            const luminance = this.getLuminance({ r, g, b })
+            this.contrastColor = luminance > 0.5 ? 'black' : 'white'
+        } else {
+            this.contrastColor = 'black'
+        }
+    }
+
+    mounted() {
+        this.computeContrastColor()
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/panels/Mmu/MmuTtgMap.vue b/src/components/panels/Mmu/MmuTtgMap.vue
new file mode 100644
index 000000000..a590bdbff
--- /dev/null
+++ b/src/components/panels/Mmu/MmuTtgMap.vue
@@ -0,0 +1,275 @@
+<template>
+    <svg
+        ref="ttgMap"
+        :viewBox="'0 0 ' + width + ' ' + height"
+        preserveAspectRatio="xMidYMid meet"
+        class="cursor-pointer"
+        @click="$emit('click')">
+        <defs>
+            <marker
+                id="squareStart"
+                markerWidth="7"
+                markerHeight="7"
+                refX="7"
+                refY="3.5"
+                orient="auto"
+                markerUnits="userSpaceOnUse">
+                <rect
+                    x="0"
+                    y="0"
+                    width="7"
+                    height="7"
+                    stroke-width="2"
+                    class="stroke-background-color fill-regular-color" />
+            </marker>
+            <marker
+                id="squareStartSelected"
+                markerWidth="7"
+                markerHeight="7"
+                refX="7"
+                refY="3.5"
+                orient="auto"
+                markerUnits="userSpaceOnUse">
+                <rect
+                    x="0"
+                    y="0"
+                    width="7"
+                    height="7"
+                    stroke-width="2"
+                    class="stroke-selected-color fill-selected-color" />
+            </marker>
+            <marker
+                id="arrowEnd"
+                markerWidth="7"
+                markerHeight="7"
+                refX="0"
+                refY="3.5"
+                orient="auto"
+                markerUnits="userSpaceOnUse">
+                <polygon points="0 0, 7 3.5, 0 7" stroke-width="1" class="stroke-background-color fill-regular-color" />
+            </marker>
+            <marker
+                id="arrowEndSelected"
+                markerWidth="7"
+                markerHeight="7"
+                refX="0"
+                refY="3.5"
+                orient="auto"
+                markerUnits="userSpaceOnUse">
+                <polygon points="0 0, 7 3.5, 0 7" stroke-width="1" class="stroke-selected-color fill-selected-color" />
+            </marker>
+        </defs>
+
+        <g v-for="(g, t) in map" :key="'tool' + t">
+            <text
+                :x="toolX"
+                :y="t * verticalSpacing + startY + 8"
+                text-anchor="end"
+                :fill="t === selectedTool ? 'var(--v-primary-lighten1, #2CA9BC)' : 'currentColor'"
+                font-size="10px"
+                :font-weight="t === selectedTool ? 'bold' : 'normal'">
+                T{{ t }}
+            </text>
+            <text
+                :x="gateX"
+                :y="t * verticalSpacing + startY + 8"
+                text-anchor="start"
+                :fill="t === selectedGate ? 'var(--v-primary-lighten1, #2CA9BC)' : 'currentColor'"
+                font-size="10px"
+                :font-weight="t === selectedGate ? 'bold' : 'normal'">
+                #{{ t }}
+            </text>
+            <g v-if="t !== selectedTool">
+                <path :d="generateMappingPathD(t)" stroke-width="4" class="stroke-background-color" fill="none" />
+                <path
+                    :d="generateMappingPathD(t)"
+                    stroke-width="2"
+                    class="stroke-regular-color"
+                    fill="none"
+                    marker-start="url(#squareStart)"
+                    marker-end="url(#arrowEnd)" />
+            </g>
+        </g>
+        <g v-if="selectedTool >= 0">
+            <path
+                :d="generateMappingPathD(selectedTool)"
+                stroke-width="6"
+                class="stroke-background-color"
+                fill="none" />
+            <path
+                :d="generateMappingPathD(selectedTool)"
+                stroke-width="4"
+                class="stroke-selected-color"
+                fill="none"
+                marker-start="url(#squareStartSelected)"
+                marker-end="url(#arrowEndSelected)" />
+        </g>
+        <g v-if="showEsGroups">
+            <g v-for="(group, index) in getEndlessSpoolGroups()" :key="'group_' + index">
+                <g v-if="group !== currentGroup">
+                    <path
+                        :d="generateEndlessSpoolPathD(group, index)"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        class="stroke-regular-color"
+                        fill="none" />
+                    <text
+                        :x="groupX + index * groupSpacing"
+                        :y="startY + map.length * verticalSpacing + 2"
+                        class="fill-regular-color"
+                        fill="red"
+                        font-size="8px">
+                        {{ String.fromCharCode(group + 65) }}
+                    </text>
+                </g>
+                <g v-else>
+                    <path
+                        :d="generateEndlessSpoolPathD(group, index)"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        class="stroke-selected-color"
+                        fill="none" />
+                    <text
+                        :x="groupX + index * groupSpacing"
+                        :y="startY + map.length * verticalSpacing + 2"
+                        class="fill-selected-color"
+                        fill="red"
+                        font-size="8px"
+                        font-weight="bold">
+                        {{ String.fromCharCode(group + 65) }}
+                    </text>
+                </g>
+            </g>
+        </g>
+    </svg>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+
+@Component({})
+export default class MmuTtgMap extends Mixins(BaseMixin, MmuMixin) {
+    @Prop({ required: false, default: 10 }) readonly startX!: number
+    @Prop({ required: false, default: 8 }) readonly startY!: number
+    @Prop({ required: false, default: 12 }) readonly verticalSpacing!: number
+    @Prop({ required: false, default: 12 }) readonly groupSpacing!: number
+    @Prop({ required: false, default: 80 }) readonly mapSpace!: number
+    @Prop({ required: false, default: 10 }) readonly leader!: number
+    @Prop({ required: false, default: true }) readonly showEsGroups!: boolean
+
+    @Prop({ required: true }) readonly map: number[]
+    @Prop({ required: true }) readonly groups: number[]
+    @Prop({ required: false, default: -1 }) readonly selectedTool: number
+    @Prop({ required: false, default: -1 }) readonly selectedGate: number
+
+    private toolX: number = this.startX + 14
+    private gateX: number = this.startX + 2 * this.leader + this.mapSpace + 40
+    private groupX: number = this.startX + 2 * this.leader + this.mapSpace + 65
+
+    get width(): number {
+        return this.groupX + this.getEndlessSpoolGroups().length * this.groupSpacing // Single gate groups aren't displayed
+    }
+
+    get height(): number {
+        return this.startY + this.map.length * this.verticalSpacing + 6
+    }
+
+    get currentGroup(): number {
+        if (this.selectedGate >= 0) {
+            return this.groups[this.selectedGate]
+        } else {
+            return -1
+        }
+    }
+
+    generateMappingPathD(tool: number): string {
+        const xOffset = 28
+        const x1 = this.startX + xOffset
+        const y1 = this.startY + tool * this.verticalSpacing + 4 // yOffset of 4 to align line with text
+        const tX = x1 + this.leader // X position for tool column
+        const gX = tX + this.mapSpace // X position for gate column
+        const gate = this.map[tool] // Gate corresponding to the tool
+        const tSpace = 2 // Horizontal "break" spacing tool side
+        const gSpace = 2 // Horizontal "break" spacing gate side
+
+        return (
+            `M ${x1} ${y1} L ${tX} ${y1} ` + // Draw leader line
+            `L ${tX + gate * tSpace} ${y1} ` + // Horizontal to gateX column
+            `L ${gX - (this.map.length - gate) * gSpace} ${this.startY + gate * this.verticalSpacing + 4} ` + // To gate column
+            `L ${gX + this.leader} ${this.startY + gate * this.verticalSpacing + 4}`
+        ) // Add trailer
+    }
+
+    generateEndlessSpoolPathD(group: number, index: number): string {
+        const tick = 5 // Dash size
+        const x1 = this.gateX + 24 + index * this.groupSpacing // X distance from TTG map
+        const y1 = this.startY + 4 // Align line with text
+
+        let dStr = ''
+        let y0: number | null = null
+        const gatesInGroup = this.findAllGatesInGroup(group)
+        if (gatesInGroup.length > 1) {
+            gatesInGroup.forEach((gate) => {
+                const y = y1 + gate * this.verticalSpacing
+                dStr += `M ${x1 + tick} ${y} L ${x1} ${y} `
+                if (y0 !== null) {
+                    dStr += `M ${x1 + tick} ${y0} L ${x1 + tick} ${y} `
+                }
+                y0 = y
+            })
+        }
+        return dStr
+    }
+
+    // Find groups with more than one gate
+    private getEndlessSpoolGroups(): number[] {
+        const countMap: { [key: number]: number } = {}
+        this.groups.forEach((num) => {
+            if (countMap[num]) {
+                countMap[num]++
+            } else {
+                countMap[num] = 1
+            }
+        })
+        const duplicates = Object.keys(countMap)
+            .filter((key) => countMap[key] > 1)
+            .map(Number)
+            .sort((a, b) => a - b)
+        return duplicates
+    }
+
+    private findAllGatesInGroup(group: number): number[] {
+        const gatesInGroup: number[] = []
+        this.groups.forEach((g, index) => {
+            if (g === group) {
+                gatesInGroup.push(index)
+            }
+        })
+        return gatesInGroup
+    }
+}
+</script>
+
+<style scoped>
+/* Bug in <path> requires separation of styles - fill attribute doesn't override! */
+.stroke-regular-color {
+    stroke: var(--v-secondary-lighten2, #808080);
+}
+.stroke-selected-color {
+    stroke: var(--v-primary-lighten1, #2ca9bc);
+}
+.stroke-background-color {
+    stroke: var(--background-color);
+}
+.fill-regular-color {
+    fill: var(--v-secondary-lighten2, #808080);
+}
+.fill-selected-color {
+    fill: var(--v-primary-lighten1, #2ca9bc);
+}
+.fill-background-color {
+    fill: var(--background-color);
+}
+</style>
diff --git a/src/components/panels/Mmu/MmuUnit.vue b/src/components/panels/Mmu/MmuUnit.vue
new file mode 100644
index 000000000..af006e0e0
--- /dev/null
+++ b/src/components/panels/Mmu/MmuUnit.vue
@@ -0,0 +1,150 @@
+<template>
+    <v-container>
+        <div class="spool-row">{{ unitDisplayName }}</div>
+        <div class="spool-row">
+            <div v-for="gate in unitGateRange" :key="'gate_' + gate" :class="gateClass(gate)" @click="selectGate(gate)">
+                <mmu-spool
+                    :width="width"
+                    :class="spoolClass(gate)"
+                    :gate-index="gate"
+                    :edit-gate-map="editGateMap"
+                    :edit-gate-selected="editGateSelected" />
+
+                <mmu-gate-status
+                    :gate-index="gate"
+                    :edit-gate-map="editGateMap"
+                    :edit-gate-selected="editGateSelected" />
+            </div>
+
+            <div v-if="!editGateMap && hasBypass" :class="gateClass(TOOL_GATE_BYPASS)" @click="selectBypass()">
+                <mmu-spool
+                    :width="width"
+                    :class="spoolClass(gate)"
+                    :gate-index="TOOL_GATE_BYPASS"
+                    :edit-gate-map="editGateMap"
+                    :edit-gate-selected="editGateSelected" />
+
+                <mmu-gate-status
+                    :gate-index="TOOL_GATE_BYPASS"
+                    :edit-gate-map="editGateMap"
+                    :edit-gate-selected="editGateSelected" />
+            </div>
+        </div>
+    </v-container>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+import MmuSpool from '@/components/panels/Mmu/MmuSpool.vue'
+import MmuGateStatus from '@/components/panels/Mmu/MmuGateStatus.vue'
+
+@Component({
+    components: { MmuSpool, MmuGateStatus },
+})
+export default class MmuUnit extends Mixins(BaseMixin, MmuMixin) {
+    @Prop({ required: false, default: 0 }) readonly unit!: number
+    @Prop({ required: false, default: null }) readonly editGateMap!: MmuGateDetails[] | null
+    @Prop({ required: false, default: -1 }) readonly editGateSelected!: number
+
+    get unitDisplayName(): string {
+        const name = this.unitDetails(this.unit).name
+        return `#${this.unit + 1} ${name}`
+    }
+
+    get unitGateRange(): number[] {
+        const unitDetails = this.unitDetails(this.unit)
+        return Array.from({ length: unitDetails.numGates }, (v, k) => k + unitDetails.firstGate)
+    }
+
+    get width(): number {
+        if (this.numGates <= 9) {
+            return '56px'
+        } else if (this.numGates <= 12) {
+            return '48px'
+        }
+        return '40px'
+    }
+
+    gateClass(gate): string[] {
+        let classes = ['gate-status', 'cursor-pointer']
+        if (this.editGateMap && this.editGateSelected === gate) {
+            classes.push('selected-gate')
+        }
+        return classes
+    }
+
+    spoolClass(gate): string[] {
+        let classes = []
+        if (this.editGateMap) {
+            if (this.editGateSelected !== gate) {
+                classes.push('shrink')
+                if (!this.isMobile && !this.isTablet) {
+                    classes.push('grow-effect')
+                }
+            }
+        } else if (!this.isMobile && !this.isTablet) {
+            classes.push('hover-effect')
+        }
+        return classes
+    }
+
+    selectGate(gate): null {
+        if (this.editGateMap) {
+            this.$emit('select-gate', gate)
+        } else if (!this.isPrinting) {
+            this.doSend('MMU_SELECT GATE=' + gate)
+        }
+    }
+
+    selectBypass() {
+        if (this.editGateMap) {
+            this.$emit('select-gate', this.TOOL_GATE_BYPASS)
+        } else if (!this.isPrinting) {
+            this.doSend('MMU_SELECT BYPASS=1')
+        }
+    }
+}
+</script>
+
+<style scoped>
+.spool-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0px;
+    font-size: 12px;
+}
+
+.gate-status {
+    font-size: 0px;
+    border-radius: 8px;
+    line-height: 1em;
+}
+
+.selected-gate {
+    background: #595959;
+}
+
+.hover-effect {
+    transition: transform 0.2s ease-in-out;
+}
+
+.hover-effect:hover {
+    transform: translateY(-4px);
+}
+
+.shrink {
+    transform: scale(0.75);
+}
+
+.grow-effect {
+    transition: transform 0.2s ease-in-out;
+}
+
+.grow-effect:hover {
+    transform: scale(1);
+}
+</style>
diff --git a/src/components/panels/MmuPanel.vue b/src/components/panels/MmuPanel.vue
new file mode 100644
index 000000000..80648266b
--- /dev/null
+++ b/src/components/panels/MmuPanel.vue
@@ -0,0 +1,278 @@
+<template>
+    <div v-if="hasMmu">
+        <panel :icon="mdiMulticast" :title="title" :collapsible="true" card-class="mmu-panel">
+            <template #buttons>
+                <v-menu left offset-y :close-on-content-click="false">
+                    <template #activator="{ on, attrs }">
+                        <v-btn icon tile v-bind="attrs" v-on="on">
+                            <v-icon>{{ mdiDotsVertical }}</v-icon>
+                        </v-btn>
+                    </template>
+                    <v-list dense>
+                        <v-list-item :disabled="!enabled" :class="{ 'mmu-disabled': !enabled }">
+                            <v-btn small style="width: 100%" @click="showEditTtgMapDialog = true">
+                                <!--<v-icon left>{{ mdiStateMachine }}</v-icon>-->
+                                {{ $t('Panels.MmuPanel.EditTtgMap') }}
+                            </v-btn>
+                        </v-list-item>
+                        <v-list-item :disabled="!enabled" :class="{ 'mmu-disabled': !enabled }">
+                            <v-btn small style="width: 100%" @click="showEditGateMapDialog = true">
+                                <!--<v-icon left>{{ mdiDatabaseEdit }}</v-icon>-->
+                                {{ $t('Panels.MmuPanel.EditGateMap') }}
+                            </v-btn>
+                        </v-list-item>
+                        <v-list-item :disabled="!enabled" :class="{ 'mmu-disabled': !enabled }">
+                            <v-btn
+                                small
+                                style="width: 100%"
+                                :disabled="!canSend"
+                                @click="showRecoverStateDialog = true">
+                                <!--<v-icon left>{{ mdiCogRefresh }}</v-icon>-->
+                                {{ $t('Panels.MmuPanel.RecoverState') }}
+                            </v-btn>
+                        </v-list-item>
+                        <v-list-item :disabled="!enabled" :class="{ 'mmu-disabled': !enabled }">
+                            <v-btn small style="width: 100%" :disabled="!canSend" @click="showMaintenanceDialog = true">
+                                <!--<v-icon left>{{ mdiWrenchCog }}</v-icon>-->
+                                {{ $t('Panels.MmuPanel.MmuMaintenance') }}
+                            </v-btn>
+                        </v-list-item>
+                        <v-list-item :disabled="!enabled" :class="{ 'mmu-disabled': !enabled }">
+                            <v-btn
+                                small
+                                style="width: 100%"
+                                :loading="loadings.includes('mmu_stats')"
+                                @click="doLoadingSend('MMU_STATS SHOWCOUNTS=1', 'mmu_stats')">
+                                <v-icon left>{{ mdiNoteText }}</v-icon>
+                                {{ $t('Panels.MmuPanel.ButtonPrintStats') }}
+                            </v-btn>
+                        </v-list-item>
+                        <v-list-item
+                            :disabled="!enabled || spoolmanSupport === 'off'"
+                            :class="{ 'mmu-disabled': !enabled || spoolmanSupport === 'off' }">
+                            <v-btn
+                                small
+                                style="width: 100%"
+                                :loading="loadings.includes('mmu_spoolman')"
+                                @click="handleSyncSpoolman()">
+                                <v-icon left>{{ mdiRefresh }}</v-icon>
+                                {{ $t('Panels.MmuPanel.ButtonSyncSpoolman') }}
+                            </v-btn>
+                        </v-list-item>
+                        <v-list-item :disabled="!enabled" :class="{ 'mmu-disabled': !enabled }">
+                            <v-btn
+                                small
+                                style="width: 100%"
+                                :disabled="!canSend"
+                                :loading="loadings.includes('mmu_check_gates')"
+                                @click="doLoadingSend('MMU_CHECK_GATES', 'mmu_check_gates')">
+                                <v-icon left>{{ mdiCheckAll }}</v-icon>
+                                {{ $t('Panels.MmuPanel.ButtonCheckAllGates') }}
+                            </v-btn>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+                <mmu-panel-settings />
+            </template>
+
+            <div :class="{ 'mmu-disabled': !enabled }">
+                <v-container fluid>
+                    <v-row align="start">
+                        <mmu-machine />
+                    </v-row>
+                    <v-row align="start">
+                        <v-col :cols="col1Size" class="pt-0 d-flex flex-column align-center justify-center">
+                            <div class="text--disabled smaller-font min-height-text">{{ toolchangeText }}</div>
+                            <div class="min-height-text">{{ statusText }}</div>
+                            <mmu-filament-status />
+                            <template v-if="showClogDetection">
+                                <mmu-clog-meter v-if="hasEncoder" width="40%" />
+                                <div class="text--disabled">{{ $t('Panels.MmuPanel.ClogDetection') }}</div>
+                            </template>
+                        </v-col>
+                        <v-col :cols="12 - col1Size" class="d-flex flex-column align-center justify-center">
+                            <template v-if="showDetails">
+                                <v-row class="pb-3 pt-0" style="align-self: flex-start; width: 100%">
+                                    <v-col class="pa-0">
+                                        <mmu-gate-summary :gate-index="gate" />
+                                    </v-col>
+                                </v-row>
+                            </template>
+                            <v-divider style="width: 100%" />
+                            <mmu-controls />
+                            <v-divider style="width: 100%" />
+                            <template v-if="showTtgMap">
+                                <mmu-ttg-map
+                                    width="75%"
+                                    :start-y="20"
+                                    :map="ttgMap"
+                                    :groups="endlessSpoolGroups"
+                                    :selected-tool="tool"
+                                    :selected-gate="gate"
+                                    @click="showEditTtgMapDialog = true" />
+                                <div class="text--disabled">{{ $t('Panels.MmuPanel.ToolMapping') }}</div>
+                            </template>
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-divider />
+                    </v-row>
+                    <v-row v-if="reasonForPause">
+                        <v-col cols="auto" class="d-flex align-center justify-center">
+                            <v-icon class="error-icon">{{ mdiInformationOutline }}</v-icon>
+                        </v-col>
+                        <v-col class="d-flex align-center">
+                            <div>
+                                <div class="text--secondary"><strong>Last Error</strong></div>
+                                <div class="text--disabled smaller-font">{{ reasonForPause }}</div>
+                            </div>
+                        </v-col>
+                    </v-row>
+                </v-container>
+            </div>
+        </panel>
+        <mmu-recover-state-dialog :show-dialog="showRecoverStateDialog" @close="showRecoverStateDialog = false" />
+        <mmu-edit-ttg-map-dialog :show-dialog="showEditTtgMapDialog" @close="showEditTtgMapDialog = false" />
+        <mmu-edit-gate-map-dialog :show-dialog="showEditGateMapDialog" @close="showEditGateMapDialog = false" />
+        <mmu-maintenance-dialog :show-dialog="showMaintenanceDialog" @close="showMaintenanceDialog = false" />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+import {
+    mdiMulticast,
+    mdiDotsVertical,
+    mdiAutoFix,
+    mdiCheckAll,
+    mdiWrenchCog,
+    mdiCogRefresh,
+    mdiDatabaseEdit,
+    mdiStateMachine,
+    mdiNoteText,
+    mdiInformationOutline,
+    mdiRefresh,
+} from '@mdi/js'
+import Panel from '@/components/ui/Panel.vue'
+import MmuMachine from '@/components/panels/Mmu/MmuMachine.vue'
+import MmuPanelSettings from '@/components/panels/Mmu/MmuPanelSettings.vue'
+import MmuFilamentStatus from '@/components/panels/Mmu/MmuFilamentStatus.vue'
+import MmuClogMeter from '@/components/panels/Mmu/MmuClogMeter.vue'
+import MmuGateSummary from '@/components/panels/Mmu/MmuGateSummary.vue'
+import MmuControls from '@/components/panels/Mmu/MmuControls.vue'
+import MmuTtgMap from '@/components/panels/Mmu/MmuTtgMap.vue'
+
+@Component({
+    components: {
+        Panel,
+        MmuMachine,
+        MmuPanelSettings,
+        MmuFilamentStatus,
+        MmuClogMeter,
+        MmuGateSummary,
+        MmuControls,
+        MmuTtgMap,
+    },
+})
+export default class MmuPanel extends Mixins(BaseMixin, MmuMixin) {
+    mdiMulticast = mdiMulticast
+    mdiDotsVertical = mdiDotsVertical
+    mdiAutoFix = mdiAutoFix
+    mdiCheckAll = mdiCheckAll
+    mdiWrenchCog = mdiWrenchCog
+    mdiCogRefresh = mdiCogRefresh
+    mdiDatabaseEdit = mdiDatabaseEdit
+    mdiStateMachine = mdiStateMachine
+    mdiNoteText = mdiNoteText
+    mdiInformationOutline = mdiInformationOutline
+    mdiRefresh = mdiRefresh
+
+    showRecoverStateDialog = false
+    showEditTtgMapDialog = false
+    showEditGateMapDialog = false
+    showMaintenanceDialog = false
+
+    get col1Size(): number {
+        if (this.$store.state.gui.view.mmu.largeFilamentStatus) return 6
+        return 5
+    }
+
+    get title(): string {
+        const headline = this.$t('Panels.MmuPanel.Headline') as string
+        if (!this.enabled) {
+            return `${headline} (disabled)`
+        }
+        return headline
+    }
+
+    get showClogDetection(): boolean {
+        return !this.hasEncoder || !!this.$store.state.gui.view.mmu.showClogDetection
+    }
+
+    get showTtgMap(): boolean {
+        return this.$store.state.gui.view.mmu.showTtgMap ?? true
+    }
+
+    get showDetails(): boolean {
+        return this.$store.state.gui.view.mmu.showDetails ?? true
+    }
+
+    get statusText(): string {
+        let posStr: string = ''
+        if (['complete', 'error', 'cancelled', 'started'].includes(this.printState)) {
+            posStr = this.capitalize(this.printState)
+        } else if (this.action == 'Idle') {
+            if (this.printState === 'printing') {
+                posStr = `Printing (${this.numToolchanges}`
+                if (this.slicerToolMap.total_toolchanges) posStr += `/${this.slicerToolMap.total_toolchanges}`
+                posStr += ' swaps)'
+            } else {
+                posStr = this.filament !== 'Unloaded' ? `Filament: ${this.filamentPosition}mm` : 'Filament: Unloaded'
+            }
+        } else if (this.action === 'Loading' || this.action === 'Unloading') {
+            posStr = `${this.action}: ${this.filamentPosition}mm`
+        } else {
+            posStr = this.action
+        }
+        return posStr
+    }
+
+    private capitalize(str: string): string {
+        if (!str) return str
+        return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
+    }
+
+    handleSyncSpoolman() {
+        this.refreshSpoolmanData()
+        this.doLoadingSend('MMU_SPOOLMAN REFRESH=1 QUIET=1', 'mmu_spoolman')
+    }
+
+    mounted() {
+        if (this.$store.state.printer.mmu?.spoolman_support ?? 'off' !== 'off') {
+            this.refreshSpoolmanData()
+        }
+    }
+}
+</script>
+
+<style scoped>
+.mmu-disabled {
+    pointer-events: none !important;
+    opacity: 0.5 !important;
+}
+
+.error-icon {
+    color: red;
+}
+
+.smaller-font {
+    font-size: 0.8em;
+}
+
+.min-height-text {
+    min-height: 1.2em;
+    line-height: 1.2em;
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index edd9fa48b..1ffe01412 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -698,6 +698,121 @@
                 "Empty": "empty"
             }
         },
+        "MmuPanel": {
+            "ButtonCheckAllGates": "Check All Gates",
+            "ButtonCheckGate": "Check Gate",
+            "ButtonEject": "Eject",
+            "ButtonLoad": "Load",
+            "ButtonLoadExt": "Load Ext",
+            "ButtonPreload": "Preload",
+            "ButtonPrintStats": "Print Stats",
+            "ButtonRecover": "Recover",
+            "ButtonSyncSpoolman": "Sync Spoolman",
+            "ButtonUnload": "Unload",
+            "ButtonUnloadExt": "Unload Ext",
+            "ButtonUnlock": "Unlock",
+            "Cancel": "Cancel",
+            "ClogDetection": "Clog Detection",
+            "CommingSoon": "Comming Soon...",
+            "Dialog": {
+                "AreYouSure": "Are you sure?"
+            },
+            "EditGateMap": "Edit Gate Info",
+            "EditTtgMap": "Map Tools",
+            "GateMapDialog": {
+                "BadTemperature": "Temperature out of range",
+                "ChooseSpool": "Choose Spool",
+                "FilamentAvailable": "Filament available in gate",
+                "FilamentName": "Filament Name",
+                "LoadSpeed": "Load speed override",
+                "Material": "Material",
+                "NoMatchingSpool": "No matching spool found",
+                "Reset": "Reset",
+                "ResetConfirmation": "This will reset the entire gate map back to the default defined in 'mmu_parameters.cfg' or empty map if no defaults are available",
+                "SelectGate": "Select gate/spool info you would like to edit",
+                "Spoolman": "Spoolman",
+                "SpoolmanId": "Spoolman ID",
+                "SpoolmanOff": "Spoolman support is \"{mode}\" in Happy Hare. Assigning spool id to a gate is disabled",
+                "SpoolmanOther": "Spoolman support is \"{mode}\". You can optionally assign a spool id or edit gate attributes directly",
+                "SpoolmanPull": "Spoolman support is in \"{mode}\" mode. Local editing of most gate properties is disabled. Assign spool/gate mapping in spoolman DB directly or use the MMU_SPOOLMAN command",
+                "Temperature": "Temperature"
+            },
+            "Headline": "Mmu",
+            "LargeFilamentStatus": "Large Filament Status",
+            "MmuMaintenance": "MMU Maintenance",
+            "MmuMaintenanceDialog": {
+                "Animation": "Animation",
+                "Config": "Config",
+                "Down": "Down",
+                "Enable": "Enable",
+                "ExtruderOnly": "Extruder Only",
+                "ExtruderTx": "Extruder Tx",
+                "Grip": "Grip",
+                "Home": "Home",
+                "Intro": "Directly manage specific MMU functions and selective configuration.",
+                "Leds": "LEDs",
+                "Load": "Load",
+                "MmuMotors": "MMU Motors",
+                "MotorSync": "Extruder Motor Sync",
+                "Move": "Move",
+                "NoCustomControls": "No Custom Controls",
+                "Off": "Off",
+                "On": "On",
+                "Release": "Release",
+                "Selector": "Selector",
+                "Sync": "Sync",
+                "UiVisual": "UI Visual",
+                "Unload": "Unload",
+                "Unsync": "Unsync",
+                "Up": "Up"
+            },
+            "MmuRecoverDialog": {
+                "FilamentLoaded": "Is the filament completely loaded to the extruder or completely unloaded?",
+                "GateBypass": "Gate is set to Bypass!",
+                "Intro": "This is a low level recovery for use when Happy Hare is out of sync with your MMU. It is recommended to try automatic recovery first however this will be required to correct the current tool or gate (Alternatively on Type-A MMU's you can unload and home the selector).",
+                "NoGate": "A gate must be selected",
+                "NoPosition": "Attempt to recover position",
+                "NoTool": "A tool must be selected",
+                "Remap": "This will remap gate to {tool}",
+                "SetGate": "Set to the current gate",
+                "SetTool": "Set to the current tool",
+                "ToolBypass": "Tool is set to Bypass!",
+                "WarningPrefix": "Warning:"
+            },
+            "NoActiveSpool": "No active spool",
+            "NoSpoolId": "No spool ID",
+            "Ok": "Ok",
+            "RecoverFilamentPosition": "Recover Filament Position",
+            "RecoverState": "Fix MMU State",
+            "ShowClogDetection": "Clog Detection",
+            "ShowDetails": "Filament Details",
+            "ShowTtgMap": "TTG Map",
+            "StartPrintDialogMmu": {
+                "MultiColor": "This looks like a Multi Material Single Extruder print using {numTools} tools. You should probably review tool mapping",
+                "SingleColor": "This looks like a single color print but you don't have the bypass selected on your MMU. You may want to check the chosen tool"
+            },
+            "ToolMapping": "Tool Mapping",
+            "TtgMapDialog": {
+                "AllTools": "All Tools",
+                "Color": "Color",
+                "EndlessSpool": "ES \u221E",
+                "FilamentInfo": "Filament Information",
+                "Gate": "Gate",
+                "MapSlicerTools": "Map slicer tools to MMU gates for print",
+                "MapTools": "Map tools to MMU gates",
+                "Material": "Material",
+                "Mismatch": "Possible filament mismatch:",
+                "NoGateData": "No gate data",
+                "NoSlicerInfo": "No slicer information, choose default mapping for {tool}",
+                "Reset": "Reset",
+                "ResetConfirmation": "This will reset the entire tool-to-gate mapping and endless spool groups back to the default defined in 'mmu_parameters.cfg' or default 1:1 mapping in no defaults are available",
+                "SelectTool": "Select Tool to map then choose gate from list",
+                "SlicerExpects": "Slicer Expects",
+                "Temperature": "Temperature",
+                "ToolNotUsed": "{tool} not used in this print, choose default mapping"
+            },
+            "Unknown": "Unknown"
+        },
         "PowerControlPanel": {
             "Error": "Error",
             "Off": "Off",
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 2b531c980..4a09cea74 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -92,6 +92,7 @@ import MiniconsolePanel from '@/components/panels/MiniconsolePanel.vue'
 import MinSettingsPanel from '@/components/panels/MinSettingsPanel.vue'
 import MiscellaneousPanel from '@/components/panels/MiscellaneousPanel.vue'
 import SpoolmanPanel from '@/components/panels/SpoolmanPanel.vue'
+import MmuPanel from '@/components/panels/MmuPanel.vue'
 import StatusPanel from '@/components/panels/StatusPanel.vue'
 import ToolheadControlPanel from '@/components/panels/ToolheadControlPanel.vue'
 import TemperaturePanel from '@/components/panels/TemperaturePanel.vue'
@@ -108,6 +109,7 @@ import WebcamPanel from '@/components/panels/WebcamPanel.vue'
         MinSettingsPanel,
         MiscellaneousPanel,
         SpoolmanPanel,
+        MmuPanel,
         StatusPanel,
         ToolheadControlPanel,
         TemperaturePanel,
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 16ba4f8d6..e4ef2b021 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -294,6 +294,12 @@ export const getDefaultState = (): GuiState => {
                     page: 'all',
                 },
             },
+            mmu: {
+                showClogDetection: true,
+                showTtgMap: true,
+                showDetails: true,
+                largeFilamentStatus: false,
+            },
         },
     }
 }
diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index 2e4bd5994..e70a1931a 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -212,6 +212,12 @@ export interface GuiState {
                 page: string
             }
         }
+        mmu: {
+            showClogDetection: boolean
+            showTtgMap: boolean
+            showDetails: boolean
+            largeFilamentStatus: boolean
+        }
     }
 }
 
diff --git a/src/store/variables.ts b/src/store/variables.ts
index c2af54579..e36822800 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -60,6 +60,11 @@ export const allowedMetadata = [
     'estimated_time',
     'filament_name',
     'filament_type',
+    'filament_colors',
+    'extruder_colors',
+    'filament_temps',
+    'referenced_tools',
+    'mmu_print',
     'filament_total',
     'filament_weight_total',
     'nozzle_diameter',
@@ -93,6 +98,7 @@ export const allDashboardPanels = [
     'miniconsole',
     'miscellaneous',
     'spoolman',
+    'mmu',
     'temperature',
     'webcam',
 ]