diff --git a/src/components/widgets/afc/AfcCard.vue b/src/components/widgets/afc/AfcCard.vue
new file mode 100644
index 0000000000..ce1f7741be
--- /dev/null
+++ b/src/components/widgets/afc/AfcCard.vue
@@ -0,0 +1,61 @@
+<template>
+  <collapsable-card
+    :title="$t('app.afc.Headline')"
+    icon="$afcIcon"
+    draggable
+    layout-path="dashboard.afc-card"
+  >
+    <template #menu>
+      <afc-card-buttons />
+      <afc-card-settings />
+    </template>
+    <v-card-text class="pt-1">
+      <afc-card-message />
+      <afc-card-bypass />
+      <afc-card-extruder
+        v-for="extruder in filteredExtruders"
+        :key="extruder"
+        :name="extruder"
+        class="mt-3"
+      />
+      <afc-card-unit
+        v-for="unit in filteredUnits"
+        :key="unit"
+        :name="unit"
+        class="mt-3"
+      />
+    </v-card-text>
+  </collapsable-card>
+</template>
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import AfcMixin from '@/mixins/afc'
+import AfcCardMessage from '@/components/widgets/afc/AfcCardMessage.vue'
+import AfcCardBypass from '@/components/widgets/afc/AfcCardBypass.vue'
+import AfcCardExtruder from '@/components/widgets/afc/AfcCardExtruder.vue'
+import AfcCardUnit from '@/components/widgets/afc/AfcCardUnit.vue'
+import AfcCardButtons from '@/components/widgets/afc/AfcCardButtons.vue'
+import AfcCardSettings from '@/components/widgets/afc/AfcCardSettings.vue'
+
+@Component({
+  components: {
+    AfcCardMessage,
+    AfcCardBypass,
+    AfcCardExtruder,
+    AfcCardUnit,
+    AfcCardButtons,
+    AfcCardSettings
+  }
+})
+export default class AfcCard extends Mixins(AfcMixin) {
+  get filteredExtruders (): string[] {
+    return this.afcExtruders
+      .filter(extruder => !this.afcHiddenExtruders.includes(extruder))
+  }
+
+  get filteredUnits (): string[] {
+    return this.afcUnits
+      .filter(unit => !this.afcHiddenUnits.includes(unit))
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/AfcCardButtons.vue b/src/components/widgets/afc/AfcCardButtons.vue
new file mode 100644
index 0000000000..b98e62616a
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardButtons.vue
@@ -0,0 +1,268 @@
+<template>
+  <v-menu
+    :offset-y="true"
+    :close-on-content-click="false"
+    :title="$t('app.afc.Functions')"
+    left
+  >
+    <template #activator="{ on, attrs }">
+      <app-btn
+        icon
+        v-bind="attrs"
+        v-on="on"
+      >
+        <v-icon dense>
+          $menu
+        </v-icon>
+      </app-btn>
+    </template>
+    <v-list dense>
+      <v-list-item
+        v-for="command in commands"
+        :key="command.command"
+      >
+        <v-tooltip
+          top
+          :disabled="!command.description"
+        >
+          <template #activator="{ on, attrs }">
+            <app-btn
+              class="fill-width"
+              :disabled="!klippyReady || command.disabled"
+              small
+              v-bind="attrs"
+              v-on="on"
+              @click="sendGcode(command.command)"
+            >
+              <v-icon
+                v-if="command.icon"
+                small
+                left
+              >
+                {{ command.icon }}
+              </v-icon>
+              {{ command.text }}
+            </app-btn>
+          </template>
+          <span>
+            {{ command.description }}
+          </span>
+        </v-tooltip>
+      </v-list-item>
+      <v-list-item
+        v-for="macro in macros"
+        :key="macro.macroName"
+      >
+        <v-tooltip
+          top
+          :disabled="!macro.macro.description"
+        >
+          <template #activator="{ on, attrs }">
+            <macro-btn
+              v-bind="attrs"
+              :macro="macro.macro"
+              small
+              class="fill-width"
+              v-on="on"
+              @click="sendGcode($event)"
+            >
+              {{ macro.text }}
+            </macro-btn>
+          </template>
+          <span>
+            {{ macro.macro.description }}
+          </span>
+        </v-tooltip>
+      </v-list-item>
+      <v-list-item>
+        <app-btn
+          class="fill-width"
+          small
+          @click="showAfcSettings = true"
+        >
+          <v-icon
+            small
+            left
+          >
+            $afcSettings
+          </v-icon>
+          {{ $t('app.afc.AfcSettings') }}
+        </app-btn>
+        <afc-settings-dialog v-model="showAfcSettings" />
+      </v-list-item>
+      <v-list-item>
+        <app-btn
+          class="fill-width"
+          small
+          @click="downloadDebugJson"
+        >
+          <v-icon
+            small
+            left
+          >
+            $afcDebugJson
+          </v-icon>
+          {{ $t('app.afc.DebugJson') }}
+        </app-btn>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import MacroBtn from '@/components/widgets/macros/MacroBtn.vue'
+import AfcSettingsDialog from '@/components/widgets/afc/dialogs/AfcSettingsDialog.vue'
+import type { GcodeCommands, KlipperPrinterAfcSettings, KlipperPrinterConfig, KlipperPrinterSettings, KlipperPrinterState } from '@/store/printer/types'
+import downloadUrl from '@/util/download-url'
+import type { Macro } from '@/store/macros/types'
+
+type AfcCommand = {
+  icon: string,
+  text: string,
+  command: string,
+  description?: string,
+  disabled?: boolean
+}
+
+type AfcMacro = {
+  text: string,
+  macroName: string,
+  macro: Macro,
+  disabled?: boolean
+}
+
+@Component({
+  components: {
+    AfcSettingsDialog,
+    MacroBtn
+  }
+})
+export default class AfcCardButtons extends Mixins(StateMixin, AfcMixin) {
+  showAfcSettings = false
+
+  get printerSettings (): KlipperPrinterSettings {
+    return this.$typedGetters['printer/getPrinterSettings']
+  }
+
+  get printerConfig (): KlipperPrinterConfig {
+    return this.$typedGetters['printer/getPrinterConfig']
+  }
+
+  get availableCommands (): GcodeCommands {
+    return this.$typedGetters['printer/getAvailableCommands']
+  }
+
+  get commands () {
+    const availableCommands = this.availableCommands
+
+    const commands: AfcCommand[] = []
+
+    if ('AFC_CALIBRATION' in availableCommands) {
+      commands.push({
+        icon: '$afcCalibration',
+        text: this.$t('app.afc.Calibrate').toString(),
+        command: 'AFC_CALIBRATION',
+        description: availableCommands['AFC_CALIBRATION'].help,
+        disabled: this.printerPrinting
+      })
+    }
+
+    if (this.afc?.led_state === true) {
+      if ('TURN_OFF_AFC_LED' in availableCommands) {
+        commands.push({
+          icon: '$afcTurnOffLed',
+          text: this.$t('app.afc.LedOff').toString(),
+          command: 'TURN_OFF_AFC_LED',
+          description: availableCommands['TURN_OFF_AFC_LED'].help
+        })
+      }
+    } else {
+      if ('TURN_ON_AFC_LED' in availableCommands) {
+        commands.push({
+          icon: '$afcTurnOnLed',
+          text: this.$t('app.afc.LedOn').toString(),
+          command: 'TURN_ON_AFC_LED',
+          description: availableCommands['TURN_ON_AFC_LED'].help
+        })
+      }
+    }
+
+    if (
+      this.afc?.td1_present === true &&
+      'AFC_GET_TD_ONE_DATA' in availableCommands
+    ) {
+      commands.push({
+        icon: '',
+        text: this.$t('app.afc.CaptureTd').toString(),
+        command: 'AFC_GET_TD_ONE_DATA',
+        description: availableCommands['AFC_GET_TD_ONE_DATA'].help,
+        disabled: this.printerPrinting
+      })
+    }
+
+    return commands
+  }
+
+  get macros () {
+    const settings: KlipperPrinterAfcSettings | undefined = this.printerSettings.afc
+
+    const afcMacros: AfcMacro[] = []
+
+    if (settings?.wipe) {
+      const macroName: string = settings.wipe_cmd || 'AFC_BRUSH'
+      const macro: Macro | undefined = this.$typedGetters['macros/getMacroByName'](macroName)
+
+      if (macro != null) {
+        afcMacros.push({
+          text: this.$t('app.afc.BrushNozzle').toString(),
+          macroName,
+          macro,
+          disabled: this.printerPrinting
+        })
+      }
+    }
+
+    if (settings?.park) {
+      const macroName: string = settings.park_cmd || 'AFC_PARK'
+      const macro: Macro | undefined = this.$typedGetters['macros/getMacroByName'](macroName)
+
+      if (macro != null) {
+        afcMacros.push({
+          text: this.$t('app.afc.ParkNozzle').toString(),
+          macroName,
+          macro,
+          disabled: this.printerPrinting
+        })
+      }
+    }
+
+    return afcMacros
+  }
+
+  downloadDebugJson () {
+    const printer: KlipperPrinterState = this.$typedState.printer.printer
+
+    const output = {
+      config: Object.fromEntries(
+        Object.entries(this.printerConfig)
+          .filter(([key]) => /^afc(?:$|_)/.test(key))
+      ),
+      settings: Object.fromEntries(
+        Object.entries(this.printerSettings)
+          .filter(([key]) => /^afc(?:$|_)/.test(key))
+      ),
+      printer: Object.fromEntries(
+        Object.entries(printer)
+          .filter(([key]) => /^afc(?:$|_)/.test(key))
+      ),
+    }
+
+    const jsonString = JSON.stringify(output)
+    const url = `data:text/plain;charset=utf-8,${encodeURIComponent(jsonString)}`
+
+    downloadUrl('afc_debug.json', url)
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/AfcCardBypass.vue b/src/components/widgets/afc/AfcCardBypass.vue
new file mode 100644
index 0000000000..8c8e541057
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardBypass.vue
@@ -0,0 +1,23 @@
+<template>
+  <v-alert
+    v-if="bypassState"
+    type="warning"
+    class="mt-3"
+    dense
+    text
+  >
+    {{ $t('app.afc.BypassActive') }}
+  </v-alert>
+</template>
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+
+@Component
+export default class AfcCardBypass extends Mixins(StateMixin, AfcMixin) {
+  get bypassState (): boolean {
+    return this.afc?.bypass_state === true
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/AfcCardExtruder.vue b/src/components/widgets/afc/AfcCardExtruder.vue
new file mode 100644
index 0000000000..f928d5692b
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardExtruder.vue
@@ -0,0 +1,233 @@
+<template>
+  <div
+    class="rounded-lg grey border-1"
+    :class="containerClasses"
+  >
+    <v-row>
+      <v-col
+        class="pl-6 py-4 text-no-wrap"
+      >
+        <v-tooltip top>
+          <template #activator="{ on, attr }">
+            <span
+              v-bind="attr"
+              class="sensor-status rounded-circle d-inline-block mr-2"
+              :class="preSensorClasses"
+              v-on="on"
+            />
+          </template>
+          <span>
+            {{ preSensorOutput }}
+          </span>
+        </v-tooltip>
+        <span>
+          {{ $filters.prettyCase(name) }}
+        </span>
+        <v-tooltip
+          v-if="hasPostSensor"
+          top
+        >
+          <template #activator="{ on, attr }">
+            <span
+              v-bind="attr"
+              class="sensor-status rounded-circle d-inline-block ml-2"
+              :class="postSensorClasses"
+              v-on="on"
+            />
+          </template>
+          <span>
+            {{ postSensorOutput }}
+          </span>
+        </v-tooltip>
+      </v-col>
+      <v-col class="py-4 text-center">
+        {{ bufferOutput }}
+      </v-col>
+      <v-col class="py-4 pr-6 text-right">
+        {{ state }}:
+        <span :class="stateLaneClasses">
+          {{ stateLane }}
+        </span>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+
+@Component({})
+export default class AfcCardExtruder extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  get afcExtruder () {
+    return this.getAfcExtruderObject(this.name)
+  }
+
+  get settings () {
+    return this.getAfcExtruderSettings(this.name)
+  }
+
+  get useRamming (): boolean {
+    return this.afcExtruder?.tool_start === 'buffer'
+  }
+
+  get hasActiveLane (): boolean {
+    const currentLane = this.afcCurrentLane
+
+    if (currentLane == null) {
+      return false
+    }
+
+    const lanes = this.afcExtruder?.lanes ?? []
+
+    return lanes.includes(currentLane.name)
+  }
+
+  get containerClasses () {
+    return {
+      'border-primary': this.hasActiveLane,
+      'border-error': this.hasActiveLane && this.afcErrorState,
+      'darken-3': this.$vuetify.theme.dark,
+      'lighten-2': !this.$vuetify.theme.dark,
+    }
+  }
+
+  get rammingState (): boolean {
+    if (!this.useRamming) return false
+
+    const extruder = this.afcCurrentLane?.extruder ?? ''
+    const bufferState = (this.afcCurrentBuffer?.state ?? '').toLowerCase()
+
+    return (
+      extruder === this.name &&
+      bufferState === 'trailing'
+    )
+  }
+
+  get laneLoaded (): string {
+    return this.afcExtruder?.lane_loaded ?? ''
+  }
+
+  get preSensorStatus (): boolean {
+    return this.afcExtruder?.tool_start_status === true
+  }
+
+  get preSensorClasses () {
+    if (this.useRamming) {
+      return {
+        success: !this.laneLoaded && this.rammingState,
+        error: !this.laneLoaded && !this.rammingState,
+        'grey lighten4': this.laneLoaded,
+      }
+    }
+
+    return {
+      success: this.preSensorStatus,
+      error: !this.preSensorStatus,
+    }
+  }
+
+  get preSensorOutput (): string {
+    if (this.useRamming) {
+      if (this.laneLoaded) return `${this.$t('app.afc.RammingSensor')}`
+
+      const status = this.rammingState ? this.$t('app.afc.Detected') : this.$t('app.afc.Empty')
+      return `${this.$t('app.afc.RammingSensor')} - ${status}`
+    }
+
+    const status = this.preSensorStatus ? this.$t('app.afc.Detected') : this.$t('app.afc.Empty')
+
+    return `${this.$t('app.afc.PreExtruderSensor')} - ${status}`
+  }
+
+  get hasPostSensor (): boolean {
+    return (
+      this.settings != null &&
+      'pin_tool_end' in this.settings
+    )
+  }
+
+  get postSensorStatus (): boolean {
+    return this.afcExtruder?.tool_end_status === true
+  }
+
+  get postSensorClasses () {
+    return {
+      success: this.postSensorStatus,
+      error: !this.postSensorStatus,
+    }
+  }
+
+  get postSensorOutput (): string {
+    const status = this.postSensorStatus ? this.$t('app.afc.Detected') : this.$t('app.afc.Empty')
+
+    return `${this.$t('app.afc.PostExtruderSensor')} - ${status}`
+  }
+
+  get bufferOutput (): string {
+    const extruder = this.afcCurrentLane?.extruder
+
+    if (extruder !== this.name) {
+      return this.$t('app.afc.BufferDisabled').toString()
+    }
+
+    return `${this.afcCurrentLane?.buffer ?? '--'}: ${this.afcCurrentBuffer?.state ?? '--'}`
+  }
+
+  get state (): string {
+    const extruder = this.afcCurrentLane?.extruder
+
+    if (extruder === this.name) {
+      if (this.printerPrinting) {
+        return this.$t('app.afc.Printing').toString()
+      }
+
+      return this.$t(`app.afc.${this.afcCurrentState}`).toString()
+    }
+
+    return this.$t('app.afc.Idle').toString()
+  }
+
+  get stateLane (): string {
+    if (this.afcExtruder?.lane_loaded) {
+      return this.afcExtruder.lane_loaded
+    }
+
+    if (this.afcCurrentLane) {
+      return this.afcCurrentLane.name
+    }
+
+    return this.$t('app.afc.LaneLoadedNone').toString()
+  }
+
+  get stateLaneClasses () {
+    return {
+      'primary--text': this.hasActiveLane,
+      'error--text': this.hasActiveLane && this.afcErrorState,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sensor-status {
+  width: 10px;
+  height: 10px;
+}
+
+.border-1 {
+  border-width: 1px;
+  border-style: solid;
+}
+
+.v-application .border-primary {
+  border-color: var(--v-primary-base) !important;
+}
+
+.v-application .border-error {
+  border-color: var(--v-error-base) !important;
+}
+</style>
diff --git a/src/components/widgets/afc/AfcCardMessage.vue b/src/components/widgets/afc/AfcCardMessage.vue
new file mode 100644
index 0000000000..74d3447265
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardMessage.vue
@@ -0,0 +1,63 @@
+<template>
+  <v-alert
+    v-if="message"
+    icon="$warning"
+    :type="type"
+    class="mt-3 align-content-center"
+    dense
+    text
+  >
+    <v-row>
+      <v-col class="grow text-format">
+        {{ message }}
+      </v-col>
+      <v-col class="shrink py-0 align-content-center">
+        <v-btn
+          icon
+          @click="clearMessage"
+        >
+          <v-icon small>
+            $close
+          </v-icon>
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-alert>
+</template>
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import { consola } from 'consola'
+
+@Component
+export default class AfcCardMessage extends Mixins(StateMixin, AfcMixin) {
+  get type (): string {
+    const type = this.afc?.message?.type ?? 'error'
+    const possibleTypes = ['info', 'warning', 'success', 'error']
+
+    if (!possibleTypes.includes(type)) {
+      consola.warn(`AfcCardMessage: Invalid message type "${type}" detected. Defaulting to "error".`)
+      return 'error'
+    }
+
+    return type
+  }
+
+  get message (): string | undefined | null {
+    return this.afc?.message?.message
+  }
+
+  clearMessage () {
+    this.sendGcode('AFC_CLEAR_MESSAGE')
+  }
+}
+</script>
+
+<style scoped>
+.text-format {
+  white-space: break-spaces;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 0.875rem;
+}
+</style>
diff --git a/src/components/widgets/afc/AfcCardSettings.vue b/src/components/widgets/afc/AfcCardSettings.vue
new file mode 100644
index 0000000000..8e0d0c950e
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardSettings.vue
@@ -0,0 +1,151 @@
+<template>
+  <v-menu
+    bottom
+    left
+    offset-y
+    transition="slide-y-transition"
+    :close-on-content-click="false"
+  >
+    <template #activator="{ on, attrs }">
+      <app-btn
+        icon
+        v-bind="attrs"
+        v-on="on"
+      >
+        <v-icon dense>
+          $cog
+        </v-icon>
+      </app-btn>
+    </template>
+
+    <v-list dense>
+      <v-list-item @click="showFilamentName = !showFilamentName">
+        <v-list-item-action class="my-0">
+          <v-checkbox :input-value="showFilamentName" />
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ $t('app.afc.ShowFilamentName') }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+
+      <v-list-item @click="showLaneInfinite = !showLaneInfinite">
+        <v-list-item-action class="my-0">
+          <v-checkbox :input-value="showLaneInfinite" />
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ $t('app.afc.ShowLaneInfinite') }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+
+      <v-list-item @click="showUnitIcons = !showUnitIcons">
+        <v-list-item-action class="my-0">
+          <v-checkbox :input-value="showUnitIcons" />
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ $t('app.afc.ShowUnitIcons') }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+
+      <v-list-item
+        v-if="td1Present"
+        @click="showTd1Color = !showTd1Color"
+      >
+        <v-list-item-action class="my-0">
+          <v-checkbox :input-value="showTd1Color" />
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ $t('app.afc.ShowTd1Color') }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+
+      <v-divider />
+
+      <afc-card-settings-extruder
+        v-for="extruder in afcExtruders"
+        :key="extruder"
+        :name="extruder"
+      />
+
+      <afc-card-settings-unit
+        v-for="unit in afcUnits"
+        :key="unit"
+        :name="unit"
+      />
+    </v-list>
+  </v-menu>
+</template>
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import AfcCardSettingsExtruder from '@/components/widgets/afc/AfcCardSettingsExtruder.vue'
+import AfcCardSettingsUnit from '@/components/widgets/afc/AfcCardSettingsUnit.vue'
+
+@Component({
+  components: {
+    AfcCardSettingsExtruder,
+    AfcCardSettingsUnit
+  }
+})
+export default class AfcCardSettings extends Mixins(StateMixin, AfcMixin) {
+  get showFilamentName (): boolean {
+    return this.afcShowFilamentName
+  }
+
+  set showFilamentName (value: boolean) {
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.afc.showFilamentName',
+      value,
+      server: true
+    })
+  }
+
+  get showLaneInfinite (): boolean {
+    return this.afcShowLaneInfinite
+  }
+
+  set showLaneInfinite (value: boolean) {
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.afc.showLaneInfinite',
+      value,
+      server: true
+    })
+  }
+
+  get showUnitIcons (): boolean {
+    return this.afcShowUnitIcons
+  }
+
+  set showUnitIcons (value: boolean) {
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.afc.showUnitIcons',
+      value,
+      server: true
+    })
+  }
+
+  get td1Present (): boolean {
+    return this.afc?.td1_present === true
+  }
+
+  get showTd1Color (): boolean {
+    return this.afcShowTd1Color
+  }
+
+  set showTd1Color (value: boolean) {
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.afc.showTd1Color',
+      value,
+      server: true
+    })
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/AfcCardSettingsExtruder.vue b/src/components/widgets/afc/AfcCardSettingsExtruder.vue
new file mode 100644
index 0000000000..78345fdd7f
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardSettingsExtruder.vue
@@ -0,0 +1,45 @@
+<template>
+  <v-list-item @click="showExtruder = !showExtruder">
+    <v-list-item-action class="my-0">
+      <v-checkbox :input-value="showExtruder" />
+    </v-list-item-action>
+    <v-list-item-content>
+      <v-list-item-title>
+        {{ $t('app.afc.ShowTool', { name: $filters.prettyCase(name) }) }}
+      </v-list-item-title>
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+
+@Component
+export default class AfcCardSettingsExtruder extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  get showExtruder () {
+    return !this.afcHiddenExtruders
+      .includes(this.name)
+  }
+
+  set showExtruder (value: boolean) {
+    const values = new Set(this.afcHiddenExtruders)
+
+    if (value) {
+      values.delete(this.name)
+    } else {
+      values.add(this.name)
+    }
+
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.afc.hiddenExtruders',
+      value: [...values],
+      server: true
+    })
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/AfcCardSettingsUnit.vue b/src/components/widgets/afc/AfcCardSettingsUnit.vue
new file mode 100644
index 0000000000..04233e0063
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardSettingsUnit.vue
@@ -0,0 +1,49 @@
+<template>
+  <v-list-item @click="showUnit = !showUnit">
+    <v-list-item-action class="my-0">
+      <v-checkbox :input-value="showUnit" />
+    </v-list-item-action>
+    <v-list-item-content>
+      <v-list-item-title>
+        {{ $t('app.afc.ShowUnit', { name: $filters.prettyCase(unitName) }) }}
+      </v-list-item-title>
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+
+@Component
+export default class AfcCardSettingsUnit extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  get unitName (): string {
+    return this.name.substring(this.name.indexOf(' ') + 1)
+  }
+
+  get showUnit () {
+    return !this.afcHiddenUnits
+      .includes(this.name)
+  }
+
+  set showUnit (value: boolean) {
+    const values = new Set(this.afcHiddenUnits)
+
+    if (value) {
+      values.delete(this.name)
+    } else {
+      values.add(this.name)
+    }
+
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.afc.hiddenUnits',
+      value: [...values],
+      server: true
+    })
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/AfcCardUnit.vue b/src/components/widgets/afc/AfcCardUnit.vue
new file mode 100644
index 0000000000..de0fc28a04
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardUnit.vue
@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <v-row>
+      <v-col class="pb-0 d-flex flex-row justify-space-between align-center">
+        <h3 class="text-h6">
+          <v-icon
+            v-if="unitIcon"
+            left
+          >
+            {{ unitIcon }}
+          </v-icon>
+          {{ $filters.prettyCase(unitName) }}
+        </h3>
+        <v-spacer />
+        <afc-card-unit-hub
+          v-for="hub in hubs"
+          :key="hub"
+          :name="hub"
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col class="d-flex flex-row flex-wrap afc-unit-container">
+        <afc-card-unit-lane
+          v-for="lane in lanes"
+          :key="lane"
+          :name="lane"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import AfcCardUnitHub from '@/components/widgets/afc/AfcCardUnitHub.vue'
+import AfcCardUnitLane from '@/components/widgets/afc/AfcCardUnitLane.vue'
+import type { AfcUnitKey, KlipperPrinterAfcUnitState, KlipperPrinterState } from '@/store/printer/types'
+
+@Component({
+  components: {
+    AfcCardUnitHub,
+    AfcCardUnitLane
+  }
+})
+export default class AfcCardUnit extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  get unitType (): string {
+    return this.name.substring(0, this.name.indexOf(' '))
+      .replace(/_/g, '')
+  }
+
+  get unitName (): string {
+    return this.name.substring(this.name.indexOf(' ') + 1)
+  }
+
+  get unit (): KlipperPrinterAfcUnitState | undefined {
+    const printer: KlipperPrinterState = this.$typedState.printer.printer
+
+    const unitObjectName = `AFC_${this.unitType} ${this.unitName}`
+      .toLowerCase()
+
+    const unitObjectKey = Object.keys(printer)
+      .find((key): key is AfcUnitKey => key.toLowerCase() === unitObjectName)
+
+    if (unitObjectKey != null) {
+      return printer[unitObjectKey]
+    }
+  }
+
+  get hubs (): string[] {
+    return this.unit?.hubs ?? []
+  }
+
+  get lanes (): string[] {
+    return this.unit?.lanes ?? []
+  }
+
+  get unitIcon (): string | null {
+    if (!this.afcShowUnitIcons) {
+      return null
+    }
+
+    switch (this.unitType.toLowerCase()) {
+      case 'boxturtle':
+        return '$afcIconBoxTurtle'
+      case 'htlf':
+        return '$afcIconHtlf'
+      case 'nightowl':
+        return '$afcIconNightOwl'
+      case 'quattrobox':
+        return '$afcIconQuattroBox'
+      default:
+        return null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.afc-unit-container {
+  gap: 16px;
+}
+</style>
diff --git a/src/components/widgets/afc/AfcCardUnitHub.vue b/src/components/widgets/afc/AfcCardUnitHub.vue
new file mode 100644
index 0000000000..81ea0b9469
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardUnitHub.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="ml-3">
+    <v-tooltip top>
+      <template #activator="{ on, attr }">
+        <span
+          v-bind="attr"
+          class="sensor-status rounded-circle d-inline-block mr-2"
+          :class="sensorClass"
+          v-on="on"
+        />
+      </template>
+      <span>
+        {{ sensorOutput }}
+      </span>
+    </v-tooltip>
+    <span class="text-body-1">
+      {{ $t('app.afc.Hub') }}
+    </span>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+
+@Component
+export default class AfcCardUnitHub extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  get hub () {
+    return this.getAfcHubObject(this.name)
+  }
+
+  get sensorStatus (): boolean {
+    return this.hub?.state === true
+  }
+
+  get sensorOutput (): string {
+    const status = this.sensorStatus ? this.$t('app.afc.Detected') : this.$t('app.afc.Empty')
+
+    return `${this.$filters.prettyCase(this.name)} ${this.$t('app.afc.HubLoad')} - ${status}`
+  }
+
+  get sensorClass () {
+    return {
+      success: this.sensorStatus,
+      error: !this.sensorStatus,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sensor-status {
+  width: 10px;
+  height: 10px;
+}
+</style>
diff --git a/src/components/widgets/afc/AfcCardUnitLane.vue b/src/components/widgets/afc/AfcCardUnitLane.vue
new file mode 100644
index 0000000000..c610581497
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardUnitLane.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="grey flex-grow-1 afc-unit-lane d-flex flex-column"
+    :class="laneStatusClass"
+  >
+    <afc-card-unit-lane-header :name="name" />
+    <template v-if="laneReady">
+      <afc-card-unit-lane-body :name="name" />
+      <afc-card-unit-lane-actions :name="name" />
+    </template>
+    <afc-card-unit-lane-empty
+      v-else
+      :name="name"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import AfcCardUnitLaneEmpty from '@/components/widgets/afc/AfcCardUnitLaneEmpty.vue'
+import AfcCardUnitLaneHeader from '@/components/widgets/afc/AfcCardUnitLaneHeader.vue'
+import AfcCardUnitLaneBody from '@/components/widgets/afc/AfcCardUnitLaneBody.vue'
+import AfcCardUnitLaneActions from '@/components/widgets/afc/AfcCardUnitLaneActions.vue'
+import type { KlipperPrinterAfcLaneState } from '@/store/printer/types'
+
+@Component({
+  components: {
+    AfcCardUnitLaneEmpty,
+    AfcCardUnitLaneHeader,
+    AfcCardUnitLaneBody,
+    AfcCardUnitLaneActions
+  }
+})
+export default class AfcCardUnitLane extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  get lane (): KlipperPrinterAfcLaneState | undefined {
+    return this.getAfcLaneObject(this.name)
+  }
+
+  get laneActive (): boolean {
+    return this.name === this.afcCurrentLane?.name
+  }
+
+  get laneStatusClass () {
+    return {
+      'darken-3': this.$vuetify.theme.dark,
+      'lighten-2': !this.$vuetify.theme.dark,
+      'border-error': this.laneActive && this.afcErrorState,
+      'border-success': this.laneActive && !this.afcErrorState,
+    }
+  }
+
+  get laneReady (): boolean {
+    return (
+      this.lane?.load === true &&
+      this.lane.prep === true
+    )
+  }
+}
+</script>
+
+<style scoped>
+.afc-unit-lane {
+  border-radius: 8px;
+  box-sizing: border-box !important;
+  border-width: 1px;
+  border-style: solid;
+  flex-basis: 0;
+}
+
+.v-application .border-error {
+  border-color: var(--v-error-base) !important;
+}
+
+.v-application .border-success {
+  border-color: var(--v-primary-base) !important;
+}
+</style>
diff --git a/src/components/widgets/afc/AfcCardUnitLaneActions.vue b/src/components/widgets/afc/AfcCardUnitLaneActions.vue
new file mode 100644
index 0000000000..2fa4f802ff
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardUnitLaneActions.vue
@@ -0,0 +1,151 @@
+<template>
+  <v-row>
+    <v-col class="px-6 pt-3 pb-6 d-flex flex-row justify-space-between">
+      <v-item-group class="_btn-group d-flex flex-nowrap fill-width py-0">
+        <v-tooltip
+          v-if="toolLoaded"
+          top
+        >
+          <template #activator="{ on, attrs }">
+            <v-btn
+              :disabled="!klippyReady || printerPrinting"
+              dense
+              class="flex-grow-1 px-0 first-btn"
+              v-bind="attrs"
+              v-on="on"
+              @click="unloadLane"
+            >
+              <v-icon small>
+                $afcUnloadLane
+              </v-icon>
+            </v-btn>
+          </template>
+          <span>
+            {{ $t('app.afc.UnloadLane') }}
+          </span>
+        </v-tooltip>
+        <v-tooltip
+          v-else
+          top
+        >
+          <template #activator="{ on, attrs }">
+            <v-btn
+              :disabled="!klippyReady || printerPrinting"
+              dense
+              class="flex-grow-1 px-0 first-btn"
+              v-bind="attrs"
+              v-on="on"
+              @click="loadLane"
+            >
+              <v-icon small>
+                $afcLoadLane
+              </v-icon>
+            </v-btn>
+          </template>
+          <span>
+            {{ $t('app.afc.LoadLane') }}
+          </span>
+        </v-tooltip>
+        <v-tooltip top>
+          <template #activator="{ on, attrs }">
+            <v-btn
+              :disabled="toolLoaded || (!laneRunout && toolLoaded)"
+              dense
+              class="flex-grow-1 px-0 last-btn"
+              v-bind="attrs"
+              v-on="on"
+              @click="ejectLane"
+            >
+              <v-icon small>
+                $afcEjectFilament
+              </v-icon>
+            </v-btn>
+          </template>
+          <span>
+            {{ $t('app.afc.EjectFilament') }}
+          </span>
+        </v-tooltip>
+      </v-item-group>
+    </v-col>
+  </v-row>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import ToolheadMixIn from '@/mixins/toolhead'
+import { encodeGcodeParamValue } from '@/util/gcode-helpers'
+import type { KlipperPrinterAfcLaneState } from '@/store/printer/types'
+
+@Component({})
+export default class AfcCardUnitLaneActions extends Mixins(StateMixin, AfcMixin, ToolheadMixIn) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  get lane (): KlipperPrinterAfcLaneState | undefined {
+    return this.getAfcLaneObject(this.name)
+  }
+
+  get laneActive (): boolean {
+    return this.name === this.afcCurrentLane?.name
+  }
+
+  get laneRunout (): boolean {
+    return (
+      this.laneActive &&
+      this.lane?.prep !== true
+    )
+  }
+
+  get toolLoaded (): boolean {
+    return this.lane?.tool_loaded === true
+  }
+
+  loadLane () {
+    this.sendGcode(`CHANGE_TOOL LANE=${encodeGcodeParamValue(this.name)}`)
+  }
+
+  unloadLane () {
+    this.sendGcode(`TOOL_UNLOAD LANE=${encodeGcodeParamValue(this.name)}`)
+  }
+
+  ejectLane () {
+    this.sendGcode(`LANE_UNLOAD LANE=${encodeGcodeParamValue(this.name)}`)
+  }
+}
+</script>
+
+<style scoped>
+._btn-group {
+  border-radius: 4px;
+
+  .v-btn {
+    border-radius: 0;
+    border-color: rgba(255, 255, 255, 0.12);
+    border-style: solid;
+    border-width: thin;
+    box-shadow: none;
+    height: 28px;
+    opacity: 0.8;
+    min-width: auto !important;
+  }
+
+  .v-btn.first-btn {
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+
+  .v-btn.last-btn {
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  .v-btn:not(.first-btn) {
+    border-left-width: 0;
+  }
+}
+
+html.theme--light ._btn-group .v-btn {
+  border-color: rgba(0, 0, 0, 0.12);
+}
+</style>
diff --git a/src/components/widgets/afc/AfcCardUnitLaneBody.vue b/src/components/widgets/afc/AfcCardUnitLaneBody.vue
new file mode 100644
index 0000000000..42943258b6
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardUnitLaneBody.vue
@@ -0,0 +1,247 @@
+<template>
+  <div>
+    <v-row class="my-3">
+      <v-col class="pl-6 pr-0 pt-0 pb-0 d-flex flex-column">
+        <v-tooltip
+          top
+          :disabled="!spoolId"
+        >
+          <template #activator="{ on, attr }">
+            <span
+              class="d-flex align-center justify-center"
+              v-bind="attr"
+              v-on="on"
+            >
+              <afc-filament-reel
+                :percent="spoolPercent"
+                :color="spoolColor"
+                class="filamentSpool"
+                @click-spool="onFilamentClick"
+              />
+            </span>
+          </template>
+          <span>
+            #{{ spoolId }} | {{ spoolVendor }}
+            <br>
+            {{ spoolFilamentName }}
+          </span>
+        </v-tooltip>
+        <afc-unit-lane-filament-dialog
+          v-model="showFilamentDialog"
+          :name="name"
+        />
+      </v-col>
+      <v-col class="pr-6 pl-2 pt-0 pb-0 d-flex flex-column justify-space-between align-end">
+        <v-btn
+          v-if="afcShowLaneInfinite"
+          x-small
+          @click="showInfintiyDialog = true"
+        >
+          <v-icon
+            v-if="runoutLane === 'NONE'"
+            color="error"
+            small
+          >
+            $afcIconInfinity
+          </v-icon>
+          <template v-else>
+            {{ runoutLane }}
+          </template>
+        </v-btn>
+        <afc-unit-lane-infinite-dialog
+          v-model="showInfintiyDialog"
+          :name="name"
+        />
+        <span class="font-weight-bold">
+          {{ spoolMaterial }}
+        </span>
+        <span class="text--disabled">
+          {{ spoolRemainingWeightOutput }}
+        </span>
+        <v-tooltip
+          v-if="tdPresent"
+          top
+        >
+          <template #activator="{ on, attr }">
+            <span
+              v-if="tdPresent"
+              class="d-flex align-center justify-center text--disable"
+              v-bind="attr"
+              v-on="on"
+            >
+              TD - {{ td }}
+            </span>
+          </template>
+          <span>
+            Color - #{{ tdColor }}
+          </span>
+        </v-tooltip>
+      </v-col>
+    </v-row>
+    <v-row
+      v-if="afcShowFilamentName"
+      class="mb-0 mt-n3"
+    >
+      <v-col class="px-6 pt-1">
+        <div class="position-relative pb-4">
+          <span class="position-absolute text-truncate text-truncate-element text-center">
+            {{ spoolFilamentName }}
+          </span>
+        </div>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import type { Spool, SpoolSelectionDialogState } from '@/store/spoolman/types'
+import AfcUnitLaneInfiniteDialog from '@/components/widgets/afc/dialogs/AfcUnitLaneInfiniteDialog.vue'
+import AfcUnitLaneFilamentDialog from '@/components/widgets/afc/dialogs/AfcUnitLaneFilamentDialog.vue'
+import AfcFilamentReel from './AfcFilamentReel.vue'
+import type { KlipperPrinterAfcLaneState } from '@/store/printer/types'
+
+@Component({
+  components: {
+    AfcUnitLaneFilamentDialog,
+    AfcUnitLaneInfiniteDialog,
+    AfcFilamentReel
+  },
+})
+export default class AfcCardUnitLaneBody extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  showInfintiyDialog = false
+  showSpoolmanDialog = false
+  showFilamentDialog = false
+  spoolmanSelection = false
+
+  get lane (): KlipperPrinterAfcLaneState | undefined {
+    return this.getAfcLaneObject(this.name)
+  }
+
+  get runoutLane (): string {
+    return this.lane?.runout_lane ?? 'NONE'
+  }
+
+  get spoolId (): number | undefined {
+    return this.lane?.spool_id ?? undefined
+  }
+
+  get spool (): Spool | null {
+    if (!this.spoolId) return null
+
+    return this.$typedGetters['spoolman/getSpoolById'](this.spoolId) ?? null
+  }
+
+  get spoolColor (): string {
+    if (
+      this.afc?.td1_present &&
+      this.lane?.td1_color &&
+      this.afcShowTd1Color
+    ) {
+      return `#${this.lane.td1_color}`
+    }
+
+    return this.lane?.color || '#000000'
+  }
+
+  get spoolRemainingWeight (): number {
+    return Math.round(this.lane?.weight ?? 0)
+  }
+
+  get spoolRemainingWeightOutput (): string {
+    return `${this.spoolRemainingWeight} g`
+  }
+
+  get spoolFullWeight (): number {
+    return this.spool?.initial_weight ?? 1000
+  }
+
+  get spoolPercent (): number {
+    if (this.spoolFullWeight === 0) return 100
+
+    return Math.round((this.spoolRemainingWeight / this.spoolFullWeight) * 100)
+  }
+
+  get spoolMaterial (): string {
+    return this.lane?.material || '--'
+  }
+
+  get spoolVendor (): string {
+    return this.spool?.filament?.vendor?.name ?? this.$t('app.afc.Unknown').toString()
+  }
+
+  get spoolFilamentName (): string {
+    return this.afcExistsSpoolman
+      ? this.spool?.filament?.name ?? this.$t('app.afc.Unknown').toString()
+      : ''
+  }
+
+  get tdPresent (): boolean {
+    return !!this.lane?.td1_td
+  }
+
+  get td (): string {
+    return this.lane?.td1_td || ''
+  }
+
+  get tdColor (): string {
+    return this.lane?.td1_color || ''
+  }
+
+  handleSelectSpool () {
+    this.spoolmanSelection = true
+    this.$typedCommit('spoolman/setDialogState', {
+      show: true,
+      spoolSelectionOnly: true,
+      selectedSpoolId: this.spoolId
+    })
+  }
+
+  @Watch('$typedState.spoolman.dialog')
+  onSpoolmanChanged (dialog: SpoolSelectionDialogState) {
+    if (
+      !dialog.show &&
+      this.spoolmanSelection
+    ) {
+      this.spoolmanSelection = false
+
+      if (dialog.selectedSpoolId !== this.spoolId) {
+        this.sendGcode(`SET_SPOOL_ID LANE=${this.name} SPOOL_ID=${dialog.selectedSpoolId ?? ''}`)
+      }
+    }
+  }
+
+  onFilamentClick () {
+    if (this.afcExistsSpoolman) {
+      this.handleSelectSpool()
+      return
+    }
+
+    this.showFilamentDialog = true
+  }
+}
+</script>
+
+<style scoped>
+.filamentSpool {
+  max-width: 38px;
+  cursor: pointer;
+}
+
+.text-truncate-element {
+  left: 0;
+  right: 0;
+}
+
+.position-absolute {
+    position: absolute !important;
+}
+
+.position-relative {
+    position: relative !important;
+}
+</style>
diff --git a/src/components/widgets/afc/AfcCardUnitLaneEmpty.vue b/src/components/widgets/afc/AfcCardUnitLaneEmpty.vue
new file mode 100644
index 0000000000..c854ee59b8
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardUnitLaneEmpty.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="d-flex flex-column flex-grow-1">
+    <v-row class="mt-0 flex-grow-1">
+      <v-col
+        class="align-content-center text-center text--disabled px-6"
+        :class="{ 'pb-6': !prep, 'pt-3': !prep }"
+      >
+        {{ text }}
+      </v-col>
+    </v-row>
+    <v-row
+      v-if="prep"
+      class="mt-0 flex-grow-0"
+    >
+      <v-col class="px-6 pb-6">
+        <v-tooltip top>
+          <template #activator="{ on, attrs }">
+            <v-btn
+              dense
+              small
+              class="fill-width elevation-0"
+              v-bind="attrs"
+              v-on="on"
+              @click="ejectLane"
+            >
+              <v-icon small>
+                $afcEjectFilament
+              </v-icon>
+            </v-btn>
+          </template>
+          <span>
+            {{ $t('app.afc.EjectFilament') }}
+          </span>
+        </v-tooltip>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import { encodeGcodeParamValue } from '@/util/gcode-helpers'
+import type { KlipperPrinterAfcLaneState } from '@/store/printer/types'
+
+@Component
+export default class AfcCardUnitLaneEmpty extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  get lane (): KlipperPrinterAfcLaneState | undefined {
+    return this.getAfcLaneObject(this.name)
+  }
+
+  get prep (): boolean {
+    return this.lane?.prep === true
+  }
+
+  get text (): string {
+    if (this.prep) return this.$t('app.afc.PrepDetected').toString()
+
+    return this.$t('app.afc.Empty').toString()
+  }
+
+  ejectLane () {
+    this.sendGcode(`LANE_UNLOAD LANE=${encodeGcodeParamValue(this.name)}`)
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/AfcCardUnitLaneHeader.vue b/src/components/widgets/afc/AfcCardUnitLaneHeader.vue
new file mode 100644
index 0000000000..e41673db31
--- /dev/null
+++ b/src/components/widgets/afc/AfcCardUnitLaneHeader.vue
@@ -0,0 +1,45 @@
+<template>
+  <v-row class="flex-grow-0">
+    <v-col class="px-6 pt-6 pb-3 py-4">
+      <v-btn
+        dense
+        small
+        class="fill-width elevation-0"
+        @click="showDialog = true"
+      >
+        {{ $filters.prettyCase(name) }} > {{ mappedTool }}
+      </v-btn>
+      <afc-unit-lane-mapping-tool-dialog
+        v-model="showDialog"
+        :name="name"
+      />
+    </v-col>
+  </v-row>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import AfcUnitLaneMappingToolDialog from '@/components/widgets/afc/dialogs/AfcUnitLaneMappingToolDialog.vue'
+import type { KlipperPrinterAfcLaneState } from '@/store/printer/types'
+
+@Component({
+  components: {
+    AfcUnitLaneMappingToolDialog
+  }
+})
+export default class AfcCardUnitLaneHeader extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  showDialog = false
+
+  get lane (): KlipperPrinterAfcLaneState | undefined {
+    return this.getAfcLaneObject(this.name)
+  }
+
+  get mappedTool (): string {
+    return this.lane?.map ?? '--'
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/AfcFilamentReel.vue b/src/components/widgets/afc/AfcFilamentReel.vue
new file mode 100644
index 0000000000..1a65af6e66
--- /dev/null
+++ b/src/components/widgets/afc/AfcFilamentReel.vue
@@ -0,0 +1,106 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0"
+    y="0"
+    viewBox="0 0 256 500"
+    xml:space="preserve"
+    width="100"
+    height="80"
+    @click="clickSpool"
+  >
+    <path
+      id="spool_right_rim"
+      d="M202.1.3h-5v2.3C179 19 165 123.6 165 250s14 231.1 32.2 247.5v2.3h5c20.5 0 37.2-111.9 37.2-249.8S222.7.3 202.1.3"
+      :style="{ fill: spoolRimColor }"
+    />
+
+    <path
+      id="spool_right"
+      d="M197.1.3c20.5 0 37.2 111.9 37.2 249.8s-16.7 249.8-37.2 249.8S160 387.9 160 250 176.6.3 197.1.3"
+      :style="{ fill: spoolColor }"
+    />
+
+    <path
+      id="spool_tube"
+      d="m194.6 166.9-145.5.1c6.9 0 12.4 37.2 12.4 83.2 0 44.1-5.1 80.3-11.6 83h144.7c6.9 0 12.4-37.2 12.4-83.2 0-45.8-5.6-83.1-12.4-83.1"
+      :style="{ fill: spoolTubeColor }"
+    />
+
+    <path
+      id="filament_base"
+      d="M35 31c18.8-12.1 138-10.4 162.1 0 24.9 10.4 41.1 398.9 0 438.1-37.2 12.2-147.7 11.4-162.1 0C22 458.8 16.2 43 35 31"
+      :style="styleReel"
+    />
+
+    <path
+      id="spool_left_rim"
+      d="M42.5.3h-5v2.3C19.3 19 5.3 123.6 5.3 250s14 231.1 32.2 247.5v2.3h5c20.5 0 37.2-111.9 37.2-249.8S63 .3 42.5.3"
+      :style="{ fill: spoolRimColor }"
+    />
+
+    <path
+      id="spool_left"
+      d="M37.5.3C58 .3 74.6 112.2 74.6 250S58 499.8 37.5 499.8.3 387.9.3 250 16.9.3 37.5.3"
+      :style="{ fill: spoolColor }"
+    />
+
+    <path
+      id="spool_hole"
+      d="M35.5 171.6c6.5 0 11.6 35.1 11.6 78.4s-5.3 78.4-11.6 78.4-11.6-35.1-11.6-78.4 5.1-78.4 11.6-78.4"
+      :style="{ fill: spoolHoleColor }"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+
+@Component
+export default class AfcFilamentReel extends Mixins(StateMixin) {
+  @Prop({ type: String, default: '#ff0' })
+  readonly color!: string
+
+  @Prop({ type: Number, default: 100 })
+  readonly percent!: number
+
+  spoolColor = '#c08f4f'
+  spoolHoleColor = '#231a0f'
+  spoolTubeColor = '#594226'
+  spoolRimColor = '#9b7242'
+
+  get styleReel () {
+    const minScale = 0.37 // 37% is the minimum visible size
+    const centerX = 128 // Center X of the SVG
+    const centerY = 250 // Center Y of the SVG
+
+    const style = {
+      fill: 'transparent',
+      stroke: 'black',
+      strokeWidth: '0',
+      transformOrigin: `${centerX}px ${centerY}px`,
+      transform: `scale(1, ${minScale})`,
+    }
+
+    // If percent greater than 0, set fill to color and apply scaling
+    if (this.percent > 0) {
+      style.fill = this.color
+
+      const scaleY = minScale + (this.percent / 100) * (1 - minScale)
+      style.transform = `scale(1, ${scaleY})`
+
+      // Apply stroke if color is not transparent
+      if (style.fill === 'transparent') style.strokeWidth = '3px'
+    }
+
+    return style
+  }
+
+  clickSpool () {
+    this.$emit('click-spool')
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/dialogs/AfcSettingsDialog.vue b/src/components/widgets/afc/dialogs/AfcSettingsDialog.vue
new file mode 100644
index 0000000000..df0d7068a1
--- /dev/null
+++ b/src/components/widgets/afc/dialogs/AfcSettingsDialog.vue
@@ -0,0 +1,73 @@
+<template>
+  <app-dialog
+    v-model="open"
+    width="700"
+    :title="$t('app.afc.AfcSettings')"
+    scrollable
+    no-actions
+  >
+    <template #menu>
+      <v-btn
+        text
+        tile
+        href="https://www.armoredturtle.xyz/docs/afc-klipper-add-on/toolhead/calculation.html"
+        target="_blank"
+        class="me-1"
+      >
+        <v-icon left>
+          $afcHelp
+        </v-icon>
+        {{ $t('app.afc.SettingsDialog.Help') }}
+      </v-btn>
+    </template>
+
+    <v-card-text class="d-flex flex-column gap-3">
+      <afc-settings-dialog-hub
+        v-for="hub in afcHubs"
+        :key="hub"
+        :name="hub"
+      />
+      <afc-settings-dialog-extruder
+        v-for="extruder in afcExtruders"
+        :key="extruder"
+        :name="extruder"
+      />
+      <afc-settings-dialog-lane
+        v-for="lane in afcLanes"
+        :key="lane"
+        :name="lane"
+      />
+    </v-card-text>
+  </app-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, VModel } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import AfcSettingsDialogHub from './AfcSettingsDialogHub.vue'
+import AfcSettingsDialogExtruder from './AfcSettingsDialogExtruder.vue'
+import AfcSettingsDialogLane from './AfcSettingsDialogLane.vue'
+
+@Component({
+  components: {
+    AfcSettingsDialogHub,
+    AfcSettingsDialogExtruder,
+    AfcSettingsDialogLane
+  }
+})
+export default class AfcSettingsDialog extends Mixins(StateMixin, AfcMixin) {
+  @VModel({ type: Boolean })
+  open?: boolean
+}
+</script>
+
+<style scoped>
+.gap-3 {
+  gap: 12px;
+}
+
+.height500 {
+  max-height: 500px;
+}
+</style>
diff --git a/src/components/widgets/afc/dialogs/AfcSettingsDialogExtruder.vue b/src/components/widgets/afc/dialogs/AfcSettingsDialogExtruder.vue
new file mode 100644
index 0000000000..a4d0412117
--- /dev/null
+++ b/src/components/widgets/afc/dialogs/AfcSettingsDialogExtruder.vue
@@ -0,0 +1,208 @@
+<template>
+  <v-card outlined>
+    <v-card-title>{{ $t('app.afc.SettingsDialog.SettingsForTitle', { name: $filters.prettyCase(name) }) }}</v-card-title>
+
+    <v-card-text>
+      <app-setting
+        :title="$t('app.afc.SettingsDialog.LoadUnloadLane')"
+        :sub-title="$t('app.afc.SettingsDialog.LoadUnloadLaneDescription')"
+      >
+        <div class="d-flex flex-wrap">
+          <v-btn
+            v-for="lane in lanes"
+            :key="lane"
+            :disabled="!filledLanes.includes(lane)"
+            small
+            class="ma-1"
+            :color="lane_loaded === lane ? 'primary' : ''"
+            @click="toggleLane(lane)"
+          >
+            {{ lane }}
+          </v-btn>
+        </div>
+      </app-setting>
+      <v-divider />
+      <app-setting
+        :title="$t('app.afc.SettingsDialog.ToolStn')"
+        :sub-title="toolStnSubTitle"
+      >
+        <app-named-text-field
+          label="tool_stn"
+          :value="currentToolStn"
+          :reset-value="settingsToolStn"
+          suffix="mm"
+          submit-on-change
+          @submit="updateToolheadSensors('TOOL_STN', $event)"
+        />
+      </app-setting>
+
+      <v-divider />
+
+      <app-setting
+        :title="$t('app.afc.SettingsDialog.ToolStnUnload')"
+        :sub-title="$t('app.afc.SettingsDialog.ToolStnUnloadDescription')"
+      >
+        <app-named-text-field
+          label="tool_stn_unload"
+          :value="currentToolStnUnload"
+          :reset-value="settingsToolStnUnload"
+          suffix="mm"
+          submit-on-change
+          @submit="updateToolheadSensors('TOOL_STN_UNLOAD', $event)"
+        />
+      </app-setting>
+
+      <template v-if="existsToolEndSensor">
+        <v-divider />
+
+        <app-setting
+          :title="$t('app.afc.SettingsDialog.ToolSensorAfterExtruder')"
+          :sub-title="$t('app.afc.SettingsDialog.ToolSensorAfterExtruderDescription')"
+        >
+          <app-named-text-field
+            label="tool_sensor_after_extruder"
+            :value="currentToolSensorAfterExtruder"
+            :reset-value="settingsToolSensorAfterExtruder"
+            suffix="mm"
+            submit-on-change
+            @submit="updateToolheadSensors('TOOL_AFTER_EXTRUDER', $event)"
+          />
+        </app-setting>
+      </template>
+
+      <v-divider />
+
+      <app-setting
+        :title="$t('app.afc.SettingsDialog.SaveExtruderValues')"
+        :sub-title="$t('app.afc.SettingsDialog.SaveExtruderValuesDescription')"
+      >
+        <v-btn
+          :disabled="!enableSaveButton"
+          color="primary"
+          @click="saveExtruderValues"
+        >
+          {{ $t('app.afc.SettingsDialog.WriteToFile') }}
+        </v-btn>
+      </app-setting>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import { encodeGcodeParamValue } from '@/util/gcode-helpers'
+import type { KlipperPrinterAfcExtruderSettings, KlipperPrinterAfcExtruderState } from '@/store/printer/types'
+
+@Component({})
+export default class AfcSettingsDialogExtruder extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  changedValue = false
+
+  get afcSettingsExtruder (): KlipperPrinterAfcExtruderSettings | undefined {
+    return this.getAfcExtruderSettings(this.name)
+  }
+
+  get settingsToolStn (): number {
+    return this.afcSettingsExtruder?.tool_stn || 0
+  }
+
+  get settingsToolStnUnload (): number {
+    return this.afcSettingsExtruder?.tool_stn_unload || 0
+  }
+
+  get settingsToolSensorAfterExtruder (): number {
+    return this.afcSettingsExtruder?.tool_sensor_after_extruder || 0
+  }
+
+  get printerObject (): KlipperPrinterAfcExtruderState | undefined {
+    return this.getAfcExtruderObject(this.name)
+  }
+
+  get currentToolStn (): number {
+    return this.printerObject?.tool_stn || 0
+  }
+
+  get currentToolStnUnload (): number {
+    return this.printerObject?.tool_stn_unload || 0
+  }
+
+  get currentToolSensorAfterExtruder (): number {
+    return this.printerObject?.tool_sensor_after_extruder || 0
+  }
+
+  get lanes (): string[] {
+    return this.printerObject?.lanes ?? []
+  }
+
+  get lane_loaded (): string {
+    return this.printerObject?.lane_loaded ?? ''
+  }
+
+  get filledLanes (): string[] {
+    const filledLanes: string[] = []
+
+    for (const lane of this.lanes) {
+      const laneObject = this.getAfcLaneObject(lane)
+
+      if (laneObject?.load && laneObject.prep) {
+        filledLanes.push(lane)
+      }
+    }
+
+    return filledLanes
+  }
+
+  get existsToolEndSensor (): boolean {
+    return (
+      this.afcSettingsExtruder != null &&
+      'pin_tool_end' in this.afcSettingsExtruder
+    )
+  }
+
+  get toolStnSubTitle (): string {
+    if (this.existsToolEndSensor) {
+      return this.$t('app.afc.SettingsDialog.ToolStnDescriptionWithEndSensor').toString()
+    }
+
+    if (this.afcSettingsExtruder?.pin_tool_start === 'buffer') {
+      return this.$t('app.afc.SettingsDialog.ToolStnDescriptionWithRamming').toString()
+    }
+
+    return this.$t('app.afc.SettingsDialog.ToolStnDescriptionWithoutEndSensor').toString()
+  }
+
+  get enableSaveButton (): boolean {
+    return (
+      this.changedValue && (
+        this.currentToolStn !== this.settingsToolStn ||
+        this.currentToolStnUnload !== this.settingsToolStnUnload ||
+        this.currentToolSensorAfterExtruder !== this.settingsToolSensorAfterExtruder
+      )
+    )
+  }
+
+  toggleLane (lane: string) {
+    if (this.lane_loaded === lane) {
+      this.sendGcode(`TOOL_UNLOAD LANE=${encodeGcodeParamValue(lane)}`)
+
+      return
+    }
+
+    this.sendGcode(`CHANGE_TOOL LANE=${encodeGcodeParamValue(lane)}`)
+  }
+
+  updateToolheadSensors (name: string, value: number) {
+    this.changedValue = true
+    this.sendGcode(`UPDATE_TOOLHEAD_SENSORS EXTRUDER=${encodeGcodeParamValue(this.name)} ${name}=${value}`)
+  }
+
+  saveExtruderValues () {
+    this.changedValue = false
+    this.sendGcode(`SAVE_EXTRUDER_VALUES EXTRUDER=${encodeGcodeParamValue(this.name)}`)
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/dialogs/AfcSettingsDialogHub.vue b/src/components/widgets/afc/dialogs/AfcSettingsDialogHub.vue
new file mode 100644
index 0000000000..dd0931fd64
--- /dev/null
+++ b/src/components/widgets/afc/dialogs/AfcSettingsDialogHub.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-card outlined>
+    <v-card-title>{{ $t('app.afc.SettingsDialog.SettingsForTitle', { name: `Hub ${$filters.prettyCase(name)}` }) }}</v-card-title>
+    <app-setting
+      :title="$t('app.afc.SettingsDialog.BowdenLength')"
+      :sub-title="$t('app.afc.SettingsDialog.BowdenLengthDescription')"
+    >
+      <app-named-text-field
+        label="afc_bowden_length"
+        :value="currentLength"
+        :reset-value="settingsLength"
+        type="number"
+        suffix="mm"
+        submit-on-change
+        @submit="setBowdenLength"
+      />
+    </app-setting>
+    <v-card-text />
+  </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import { encodeGcodeParamValue } from '@/util/gcode-helpers'
+import type { KlipperPrinterAfcHubSettings, KlipperPrinterAfcHubState } from '@/store/printer/types'
+
+@Component({})
+export default class AfcSettingsDialogHub extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  get afcSettingsHub (): KlipperPrinterAfcHubSettings | undefined {
+    return this.getAfcHubSettings(this.name)
+  }
+
+  get settingsLength (): number {
+    return this.afcSettingsHub?.afc_bowden_length || 0
+  }
+
+  get hubObject (): KlipperPrinterAfcHubState | undefined {
+    return this.$typedState.printer.printer[`AFC_hub ${this.name}`]
+  }
+
+  get currentLength (): number {
+    return this.hubObject?.afc_bowden_length || 0
+  }
+
+  setBowdenLength (value: number) {
+    this.sendGcode(`SET_BOWDEN_LENGTH HUB=${encodeGcodeParamValue(this.name)} LENGTH=${value}`)
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/dialogs/AfcSettingsDialogLane.vue b/src/components/widgets/afc/dialogs/AfcSettingsDialogLane.vue
new file mode 100644
index 0000000000..35643cdd47
--- /dev/null
+++ b/src/components/widgets/afc/dialogs/AfcSettingsDialogLane.vue
@@ -0,0 +1,93 @@
+<template>
+  <v-card outlined>
+    <v-card-title>{{ $t('app.afc.SettingsDialog.SettingsForTitle', { name: $filters.prettyCase(name) }) }}</v-card-title>
+
+    <v-card-text>
+      <app-setting
+        :title="$t('app.afc.SettingsDialog.DistHub')"
+        :sub-title="$t('app.afc.SettingsDialog.DistHubDescription')"
+      >
+        <app-named-text-field
+          label="dist_hub"
+          :value="currentDistHub"
+          :reset-value="settingsDistHub"
+          suffix="mm"
+          submit-on-change
+          @submit="setHubDist"
+        />
+      </app-setting>
+
+      <v-divider />
+
+      <app-setting
+        :title="$t('app.afc.SettingsDialog.SaveHubDist')"
+        :sub-title="$t('app.afc.SettingsDialog.SaveHubDistDescription')"
+      >
+        <v-btn
+          :disabled="!enableSaveButton"
+          color="primary"
+          @click="saveHubDist"
+        >
+          {{ $t('app.afc.SettingsDialog.WriteToFile') }}
+        </v-btn>
+      </app-setting>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import { encodeGcodeParamValue } from '@/util/gcode-helpers'
+import type { KlipperPrinterAfcLaneSettings, KlipperPrinterAfcLaneState, KlipperPrinterAfcStepperSettings } from '@/store/printer/types'
+
+@Component({})
+export default class AfcSettingsDialogLane extends Mixins(StateMixin, AfcMixin) {
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  changedValue = false
+
+  get afcSettingsLane (): KlipperPrinterAfcLaneSettings | KlipperPrinterAfcStepperSettings | undefined {
+    return this.getAfcLaneSettings(this.name)
+  }
+
+  get afcLane (): KlipperPrinterAfcLaneState | undefined {
+    return this.getAfcLaneObject(this.name)
+  }
+
+  get settingsDistHub (): number {
+    return (
+      this.afcSettingsLane != null &&
+      'dist_hub' in this.afcSettingsLane &&
+      this.afcSettingsLane.dist_hub
+    ) || 0
+  }
+
+  get currentDistHub (): number {
+    return (
+      this.afcLane != null &&
+      'dist_hub' in this.afcLane &&
+      this.afcLane.dist_hub
+    ) || 0
+  }
+
+  get enableSaveButton (): boolean {
+    return (
+      this.changedValue &&
+      this.currentDistHub !== this.settingsDistHub
+    )
+  }
+
+  setHubDist (value: number) {
+    this.changedValue = true
+    this.sendGcode(`SET_HUB_DIST LANE=${encodeGcodeParamValue(this.name)} LENGTH=${value}`)
+  }
+
+  saveHubDist () {
+    this.changedValue = false
+    this.sendGcode(`SAVE_HUB_DIST LANE=${encodeGcodeParamValue(this.name)}`)
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/dialogs/AfcUnitLaneFilamentDialog.vue b/src/components/widgets/afc/dialogs/AfcUnitLaneFilamentDialog.vue
new file mode 100644
index 0000000000..fc4f3859e4
--- /dev/null
+++ b/src/components/widgets/afc/dialogs/AfcUnitLaneFilamentDialog.vue
@@ -0,0 +1,129 @@
+<template>
+  <app-dialog
+    v-model="show"
+    :title="$t('app.afc.FilamentForLane', { name: $filters.prettyCase(name) })"
+    width="400"
+    :save-button-text="$t('app.afc.SetSpool')"
+    :save-button-disabled="disableSetBtn"
+    @save="setSpool"
+  >
+    <v-card-text class="pb-0">
+      <app-setting
+        :title="$t('app.afc.Material')"
+        :sub-title="$t('app.afc.MaterialSubtitle')"
+      >
+        <v-text-field
+          v-model="material"
+          placeholder="ABS"
+          dense
+          outlined
+          hide-details
+        />
+      </app-setting>
+      <v-divider class="my-3" />
+      <app-setting
+        :title="$t('app.afc.Weight')"
+        :sub-title="$t('app.afc.WeightSubtitle')"
+      >
+        <v-text-field
+          v-model="weight"
+          placeholder="1000"
+          dense
+          outlined
+          type="number"
+          :min="0"
+          :step="1"
+          hide-details
+        />
+      </app-setting>
+      <v-divider class="my-3" />
+      <v-color-picker
+        hide-mode-switch
+        mode="hexa"
+        :value="color"
+        class="mx-auto"
+        @update:color="setColor"
+      />
+    </v-card-text>
+  </app-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, Watch, VModel } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import { Debounce } from 'vue-debounce-decorator'
+import { encodeGcodeParamValue } from '@/util/gcode-helpers'
+
+@Component({})
+export default class AfcUnitLaneFilamentDialog extends Mixins(StateMixin, AfcMixin) {
+  @VModel({ type: Boolean })
+  show!: boolean
+
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  color = '#000000'
+  material = ''
+  weight = 0
+
+  get lane () {
+    return this.getAfcLaneObject(this.name)
+  }
+
+  get currentColor (): string {
+    return this.lane?.color ?? '#000000'
+  }
+
+  get currentMaterial (): string {
+    return this.lane?.material ?? ''
+  }
+
+  get currentWeight (): number {
+    return Math.round(this.lane?.weight ?? 0)
+  }
+
+  get disableSetBtn (): boolean {
+    return (
+      !this.material ||
+      !this.weight ||
+      !this.color
+    )
+  }
+
+  @Debounce(500)
+  setColor (newColor: { hex: string }) {
+    this.color = newColor.hex
+  }
+
+  setSpool () {
+    const gcode: string[] = []
+
+    if (this.color !== this.currentColor) {
+      const cleanedColor = this.color.substring(1)
+      gcode.push(`SET_COLOR LANE=${encodeGcodeParamValue(this.name)} COLOR=${encodeGcodeParamValue(cleanedColor)}`)
+    }
+
+    if (this.material !== this.currentMaterial) {
+      gcode.push(`SET_MATERIAL LANE=${encodeGcodeParamValue(this.name)} MATERIAL=${encodeGcodeParamValue(this.material)}`)
+    }
+
+    if (this.weight !== this.currentWeight) {
+      gcode.push(`SET_WEIGHT LANE=${encodeGcodeParamValue(this.name)} WEIGHT=${this.weight}`)
+    }
+
+    this.sendGcode(gcode.join('\n'))
+
+    this.show = false
+  }
+
+  @Watch('show')
+  onShowChange (newValue: boolean) {
+    if (!newValue) return
+
+    this.color = this.currentColor
+    this.material = this.currentMaterial
+    this.weight = this.currentWeight
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/dialogs/AfcUnitLaneInfiniteDialog.vue b/src/components/widgets/afc/dialogs/AfcUnitLaneInfiniteDialog.vue
new file mode 100644
index 0000000000..88fc13bb24
--- /dev/null
+++ b/src/components/widgets/afc/dialogs/AfcUnitLaneInfiniteDialog.vue
@@ -0,0 +1,85 @@
+<template>
+  <app-dialog
+    v-model="open"
+    :title="$t('app.afc.InfiniteSpoolHeadline')"
+    width="400"
+    no-actions
+  >
+    <v-card-text>
+      <v-row>
+        <v-col class="pb-0">
+          <p>{{ $t('app.afc.InfiniteSpoolDescription', { name: $filters.prettyCase(name) }) }}</p>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col class="pt-0 text-center">
+          <v-btn
+            v-for="lane in laneList"
+            :key="lane"
+            :disabled="runoutLane === lane"
+            color="primary"
+            class="ma-2"
+            @click="setRunout(lane)"
+          >
+            {{ lane }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </app-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, VModel } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import { encodeGcodeParamValue } from '@/util/gcode-helpers'
+import type { KlipperPrinterAfcLaneState } from '@/store/printer/types'
+
+@Component({})
+export default class AfcUnitLaneInfiniteDialog extends Mixins(StateMixin, AfcMixin) {
+  @VModel({ type: Boolean })
+  open?: boolean
+
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  get lane (): KlipperPrinterAfcLaneState | undefined {
+    return this.getAfcLaneObject(this.name)
+  }
+
+  get runoutLane (): string {
+    return this.lane?.runout_lane ?? 'NONE'
+  }
+
+  get laneList (): string[] {
+    const laneList: string[] = []
+
+    for (const laneName of this.afcLanes) {
+      if (laneName === this.name) {
+        continue
+      }
+
+      const lane = this.getAfcLaneObject(laneName)
+
+      if (
+        lane?.prep === true &&
+        lane.load === true
+      ) {
+        laneList.push(lane.name)
+      }
+    }
+
+    return [
+      'NONE',
+      ...laneList.sort((a, b) => a.localeCompare(b))
+    ]
+  }
+
+  setRunout (newLane: string) {
+    this.sendGcode(`SET_RUNOUT LANE=${encodeGcodeParamValue(this.name)} RUNOUT=${encodeGcodeParamValue(newLane)}`)
+
+    this.open = false
+  }
+}
+</script>
diff --git a/src/components/widgets/afc/dialogs/AfcUnitLaneMappingToolDialog.vue b/src/components/widgets/afc/dialogs/AfcUnitLaneMappingToolDialog.vue
new file mode 100644
index 0000000000..930816ae2e
--- /dev/null
+++ b/src/components/widgets/afc/dialogs/AfcUnitLaneMappingToolDialog.vue
@@ -0,0 +1,75 @@
+<template>
+  <app-dialog
+    v-model="open"
+    :title="$t('app.afc.LaneMapping')"
+    width="400"
+    no-actions
+  >
+    <v-card-text>
+      <v-row>
+        <v-col class="pb-0">
+          <p>{{ $t('app.afc.LaneMappingToCommand', { name: $filters.prettyCase(name) }) }}</p>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col class="pt-0 text-center">
+          <v-btn
+            v-for="tool in mapList"
+            :key="tool"
+            :disabled="tool.toLowerCase() === mappedTool.toLowerCase()"
+            color="primary"
+            class="ma-2"
+            @click="mapTool(tool)"
+          >
+            {{ tool.toUpperCase() }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </app-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, VModel } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import { encodeGcodeParamValue } from '@/util/gcode-helpers'
+
+@Component({})
+export default class AfcUnitLaneMappingToolDialog extends Mixins(StateMixin, AfcMixin) {
+  @VModel({ type: Boolean })
+  open?: boolean
+
+  @Prop({ type: String, required: true })
+  readonly name!: string
+
+  get lane () {
+    return this.getAfcLaneObject(this.name)
+  }
+
+  get mappedTool (): string {
+    return this.lane?.map ?? '--'
+  }
+
+  get mapList (): string[] {
+    const mapList: string[] = []
+
+    for (const laneName of this.afcLanes) {
+      const lane = this.getAfcLaneObject(laneName)
+
+      if (lane?.map != null) {
+        mapList.push(lane.map)
+      }
+    }
+
+    return mapList
+      .sort((a, b) => a.localeCompare(b))
+  }
+
+  mapTool (newTool: string) {
+    this.sendGcode(`SET_MAP LANE=${encodeGcodeParamValue(this.name)} MAP=${encodeGcodeParamValue(newTool)}`)
+
+    this.open = false
+  }
+}
+</script>
diff --git a/src/components/widgets/macros/MacroBtn.vue b/src/components/widgets/macros/MacroBtn.vue
index da97e9668d..4cdc9bbc34 100644
--- a/src/components/widgets/macros/MacroBtn.vue
+++ b/src/components/widgets/macros/MacroBtn.vue
@@ -1,8 +1,10 @@
 <template>
   <app-btn-group divided>
     <app-btn
+      v-bind="$attrs"
       :disabled="(macro.disabledWhilePrinting && printerPrinting) || !klippyReady"
       :style="borderStyle"
+      class="flex-grow-1"
       v-on="filteredListeners"
       @click="handleClick"
     >
@@ -17,7 +19,7 @@
     >
       <template #activator="{ on, attrs, value }">
         <app-btn
-          v-bind="attrs"
+          v-bind="{...$attrs, ...attrs}"
           min-width="24"
           class="px-0"
           :disabled="(macro.disabledWhilePrinting && printerPrinting) || !klippyReady"
@@ -85,7 +87,9 @@ type MacroParameter = {
   reset: string | number
 }
 
-@Component({})
+@Component({
+  inheritAttrs: false
+})
 export default class MacroBtn extends Mixins(StateMixin) {
   @Prop({ type: Object, required: true })
   readonly macro!: Macro
diff --git a/src/components/widgets/spoolman/SpoolSelectionDialog.vue b/src/components/widgets/spoolman/SpoolSelectionDialog.vue
index 50a5a36bcb..fba5c217a8 100644
--- a/src/components/widgets/spoolman/SpoolSelectionDialog.vue
+++ b/src/components/widgets/spoolman/SpoolSelectionDialog.vue
@@ -158,6 +158,16 @@
               </div>
             </template>
 
+            <template #[`item-value.afc_loaded_lane`]="{ value }">
+              <v-chip
+                v-if="value != null"
+                color="primary"
+                small
+              >
+                {{ $filters.prettyCase(value ?? '') }}
+              </v-chip>
+            </template>
+
             <template #[`item-value.initial_weight`]="{ value }">
               {{ $filters.getReadableWeightString(value) }}
             </template>
@@ -272,6 +282,7 @@
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
 import { SocketActions } from '@/api/socketActions'
 import type { Spool } from '@/store/spoolman/types'
 import BrowserMixin from '@/mixins/browser'
@@ -285,12 +296,16 @@ import type { KlipperPrinterConfig } from '@/store/printer/types'
 import type { AppFileWithMeta } from '@/store/files/types'
 import type { SpoolmanRemainingFilamentUnit } from '@/store/config/types'
 
+type SpoolWithAfcLoadedLane = Spool & {
+  afc_loaded_lane?: string
+}
+
 @Component({
   components: {
     QRReader
   }
 })
-export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixin) {
+export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixin, AfcMixin) {
   search = ''
   selectedSpoolId: number | null = null
 
@@ -343,11 +358,19 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
     })
   }
 
-  get availableSpools () {
+  get availableSpools (): SpoolWithAfcLoadedLane[] {
     const availableSpools: Spool[] = this.$typedGetters['spoolman/getAvailableSpools']
 
+    const afcLoadedSpools = this.afc != null
+      ? this.afcLoadedSpools
+      : {}
+
     return availableSpools
       .filter(x => !x.archived)
+      .map(spool => ({
+        ...spool,
+        afc_loaded_lane: afcLoadedSpools[spool.id]
+      } satisfies SpoolWithAfcLoadedLane))
   }
 
   get currency (): string | null {
@@ -355,12 +378,23 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
   }
 
   get configurableHeaders (): AppDataTableHeader[] {
+    const afcHeaders: AppDataTableHeader[] = this.afc != null
+      ? [
+          {
+            text: this.$tc('app.afc.LaneLoaded'),
+            value: 'afc_loaded_lane',
+            cellClass: 'text-no-wrap'
+          }
+        ]
+      : []
+
     const headers: AppDataTableHeader[] = [
       {
         text: this.$tc('app.spoolman.label.id'),
         value: 'id',
         cellClass: 'text-no-wrap'
       },
+      ...afcHeaders,
       {
         text: this.$tc('app.spoolman.label.material'),
         value: 'filament.material',
@@ -463,7 +497,7 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
         text: this.$tc('app.spoolman.label.last_used'),
         value: 'last_used',
         cellClass: 'text-no-wrap'
-      },
+      }
     ]
 
     const mergedTableHeaders: AppDataTableHeader[] = this.$typedGetters['config/getMergedTableHeaders'](headers, 'spoolman')
diff --git a/src/components/widgets/status/StatusLabel.vue b/src/components/widgets/status/StatusLabel.vue
index 7c37ae8b5e..eef5f7c188 100644
--- a/src/components/widgets/status/StatusLabel.vue
+++ b/src/components/widgets/status/StatusLabel.vue
@@ -25,7 +25,7 @@ export default class AppSwitch extends Mixins(StateMixin) {
   @Prop({ type: String, required: true })
   readonly label!: string
 
-  @Prop({ type: [String, Number], default: 70 })
+  @Prop({ type: [String, Number], default: 80 })
   readonly labelWidth!: string | number
 }
 </script>
diff --git a/src/components/widgets/status/StatusTab.vue b/src/components/widgets/status/StatusTab.vue
index 85ecc10f13..369869299c 100644
--- a/src/components/widgets/status/StatusTab.vue
+++ b/src/components/widgets/status/StatusTab.vue
@@ -119,6 +119,13 @@
               <status-label :label="$t('app.general.label.layer')">
                 <span v-if="layers > 0">{{ layer }} / {{ layers }}</span>
               </status-label>
+
+              <status-label
+                v-if="totalToolChangeCount > 0"
+                :label="$t('app.general.label.toolchange')"
+              >
+                <span>{{ currentToolChange }} / {{ totalToolChangeCount }}</span>
+              </status-label>
             </v-col>
 
             <v-col
@@ -365,6 +372,14 @@ export default class StatusTab extends Mixins(StateMixin, FilesMixin, ToolheadMi
     return this.$typedGetters['printer/getPrintLayer']
   }
 
+  get currentToolChange (): number {
+    return this.$typedState.printer.printer?.AFC?.current_toolchange ?? 0
+  }
+
+  get totalToolChangeCount (): number {
+    return this.$typedState.printer.printer?.AFC?.number_of_toolchanges ?? 0
+  }
+
   /**
    * Filament used according to print stats.
    */
diff --git a/src/globals.ts b/src/globals.ts
index bd0e027118..ab53cc7307 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -189,16 +189,31 @@ import {
   mdiContentSaveSettingsOutline,
   mdiMulticast,
   mdiInformationOutline,
-  mdiSwapHorizontal
+  mdiSwapHorizontal,
+  mdiLifebuoy,
+  mdiLightbulbOnOutline,
+  mdiLightbulbOutline,
+  mdiWrench,
+  mdiVariable,
+  mdiArrowDownBold,
+  mdiArrowUpBold
 } from '@mdi/js'
 
+import {
+  afcIconBoxTurtle,
+  afcIconHtlf,
+  afcIconInfinity,
+  afcIconLogo,
+  afcIconNightOwl,
+  afcIconQuattroBox
+} from '@/plugins/afcIcons'
+
 const mdiFilament = 'M12 2a10 10 0 0 0-2.148.26 10 10 0 0 0-1.315.386A10 10 0 0 0 7.672 3H7.67a10 10 0 0 0-1.295.752 10 10 0 0 0-.754.564 10 10 0 0 0-.98.938 10 10 0 0 0-.598.732 10 10 0 0 0-1.57 3.016 10 10 0 0 0-.315 1.314 10 10 0 0 0-.105.932v.008A10 10 0 0 0 2 12q0 .378.031.756l.002.012a10 10 0 0 0 .426 2.222 10 10 0 0 0 .38 1.014l.007.014.008.013q.218.497.488.967l.002.002a10 10 0 0 0 2.265 2.69 10 10 0 0 0 2.06 1.322h.003a10 10 0 0 0 2.15.746h.002q.514.114 1.035.174l.079.01q.529.057 1.062.058a10 10 0 0 0 2.148-.26 10 10 0 0 0 1.315-.386 10 10 0 0 0 .865-.354h.002a10 10 0 0 0 1.295-.752 10 10 0 0 0 .754-.564 10 10 0 0 0 .98-.938 10 10 0 0 0 .598-.732 10 10 0 0 0 1.57-3.016 10 10 0 0 0 .315-1.314 10 10 0 0 0 .105-.932v-.008q.04-.37.053-.744 0-.378-.031-.756l-.002-.012a10 10 0 0 0-.426-2.222 10 10 0 0 0-.38-1.014l-.007-.014-.008-.013a10 10 0 0 0-.488-.967L20.656 7a10 10 0 0 0-2.265-2.69 10 10 0 0 0-2.06-1.322h-.003a10 10 0 0 0-2.15-.746h-.002a10 10 0 0 0-1.114-.183A10 10 0 0 0 12 2m-1.299 2.25.256.148.11.063.066.039.433.25v1l-.433.25-.258.148v.002l-.174.1-.433-.25-.432-.25v-1l.268-.154zm2.598 0 .865.5v1l-.865.5-.865-.5v-1zm-4.46.426.13.074v1L8.537 6l-.433.25-.866-.5v-.172a8 8 0 0 1 1.602-.902m6.321 0a8 8 0 0 1 1.602.902v.172l-.658.38-.208.12-.865-.5v-1zM6.805 6.5l.865.5v1l-.865.5-.104-.06L5.94 8V7zm2.597 0 .866.5v1l-.127.074-.307.176-.432.25-.431-.25L8.537 8V7l.432-.25zM12 6.5l.865.5v1l-.12.07h-.003A4 4 0 0 0 12 8a4 4 0 0 0-.732.076L11.135 8V7l.761-.44zm2.598 0 .431.25.434.25v1l-.865.5-.432-.25-.434-.25V7l.434-.25zm2.597 0 .104.06.762.44v1l-.762.44-.104.06-.865-.5V7zM5.505 8.75l.866.5v1l-.865.5-.865-.5v-1zm2.599 0 .865.5v.14a4 4 0 0 0-.733 1.284l-.132.076-.56-.322-.306-.178v-1zm7.792 0 .866.5v1l-.434.25-.432.25-.12-.07a4 4 0 0 0-.657-1.174q-.043-.057-.088-.113V9.25l.432-.25zm2.598 0 .865.5v1l-.865.5-.207-.12-.658-.38v-1zM12 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4m-7.793 1 .865.5v1l-.865.5-.135-.078A8 8 0 0 1 4 12a8 8 0 0 1 .072-.922zm2.598 0 .431.25.434.25v1l-.865.5-.104-.06-.762-.44v-1l.762-.44zm10.39 0 .104.06.762.44v1l-.762.44-.104.06-.431-.25-.434-.25v-1zm2.598 0 .135.078q.063.46.072.922a8 8 0 0 1-.072.922l-.135.078-.865-.5v-1zM5.506 13.25l.207.12.658.38v1l-.865.5-.865-.5v-1zm2.598 0 .12.07c.15.427.375.822.657 1.174q.043.057.088.113v.143l-.432.25-.433.25-.866-.5v-1l.434-.25zm7.792 0 .56.322.306.178v1l-.866.5-.865-.5v-.14a4 4 0 0 0 .621-1.008 4 4 0 0 0 .112-.276zm2.598 0 .865.5v1l-.865.5-.865-.5v-1zM6.804 15.5l.866.5v1l-.865.5-.104-.06L5.94 17v-1l.762-.44zm2.598 0 .432.25.434.25v1l-.434.25-.432.25-.431-.25-.434-.25v-1l.432-.25h.002zm5.196 0 .431.25.434.25v1l-.432.25-.433.25-.866-.5v-1l.127-.074.307-.176zm2.597 0 .104.06.762.44v1l-.866.5-.865-.5v-1zm-4.463.424.133.076v1l-.761.44-.104.06-.865-.5v-1l.12-.07h.003A4 4 0 0 0 12 16a4 4 0 0 0 .732-.076M8.104 17.75l.865.5v1l-.13.074a8 8 0 0 1-1.6-.902v-.172l.657-.38zm2.597 0 .865.5v1l-.865.5-.865-.5v-1zm2.598 0 .433.25.432.25v1l-.268.154-.597.346-.256-.148-.176-.102-.433-.25v-1l.433-.25.258-.148v-.002zm2.597 0 .866.5v.172a8 8 0 0 1-1.602.902l-.129-.074v-1l.432-.25z'
 const mdiFilamentDown = 'M12 2a10 10 0 0 0-1.129.08 10 10 0 0 0-1.02.18 10 10 0 0 0-1.314.386A10 10 0 0 0 7.672 3H7.67a10 10 0 0 0-1.295.752 10 10 0 0 0-.754.564 10 10 0 0 0-.98.938 10 10 0 0 0-.598.732l-.125.168a10 10 0 0 0-.541.826l-.035.065a10 10 0 0 0-.87 1.957 10 10 0 0 0-.314 1.314 10 10 0 0 0-.105.932v.008A10 10 0 0 0 2 12a10 10 0 0 0 .053.742v.006a10 10 0 0 0 .105.936 10 10 0 0 0 .315 1.314 10 10 0 0 0 .869 1.957l.035.065a10 10 0 0 0 .541.826l.125.168a10 10 0 0 0 .598.732 10 10 0 0 0 .98.938 10 10 0 0 0 .754.564A10 10 0 0 0 7.67 21h.002a10 10 0 0 0 .865.354 10 10 0 0 0 1.315.386 10 10 0 0 0 1.02.18A10 10 0 0 0 12 22a10 10 0 0 0 1.129-.08 10 10 0 0 0 .59-.104 6 6 0 0 1-.676-2.214l-.61-.352v-1l.434-.25.258-.148a6 6 0 0 1 .607-1.692V16l.127-.074a6 6 0 0 1 1.342-1.559 4 4 0 0 0 .563-1.04l.132-.077.56.322A6 6 0 0 1 19 13a6 6 0 0 1 2.834.713l.008-.03a10 10 0 0 0 .105-.931v-.008A10 10 0 0 0 22 12a10 10 0 0 0-.031-.756l-.002-.012a10 10 0 0 0-.113-.921 10 10 0 0 0-.313-1.301 10 10 0 0 0-.38-1.014l-.007-.014-.008-.013a10 10 0 0 0-.488-.967L20.656 7a10 10 0 0 0-.6-.92 10 10 0 0 0-.697-.848 10 10 0 0 0-.968-.921 10 10 0 0 0-.752-.567 10 10 0 0 0-1.309-.756h-.002a10 10 0 0 0-.865-.367 10 10 0 0 0-1.285-.379h-.002a10 10 0 0 0-1.035-.174l-.079-.01A10 10 0 0 0 12 2m-1.299 2.25.432.25.433.25v1l-.865.5-.433-.25-.432-.25v-1l.268-.154zm2.598 0 .865.5v1l-.865.5-.865-.5v-1zm1.883.414a8 8 0 0 1 1.58.91v.176l-.658.38-.208.12-.865-.5v-1zm-6.342.012.129.074v1L8.537 6l-.433.25-.866-.5v-.172a8 8 0 0 1 1.602-.902M6.805 6.5l.865.5v1l-.865.5-.104-.06L5.94 8V7zm2.597 0 .866.5v1l-.434.25-.432.25-.431-.25L8.537 8V7l.432-.25zM12 6.5l.865.5v1l-.12.07A4 4 0 0 0 12 8a4 4 0 0 0-.732.076L11.135 8V7zm2.598 0 .865.5v1l-.865.5-.866-.5V7zm2.597 0 .866.5v1l-.866.5-.865-.5V7zM5.505 8.75l.866.5v1l-.865.5-.865-.5v-1zm2.599 0 .865.5v.14a4 4 0 0 0-.733 1.284l-.132.076-.866-.5v-1zm7.792 0 .866.5v1l-.866.5-.12-.07a4 4 0 0 0-.745-1.287V9.25zm2.598 0 .865.5v1l-.865.5-.207-.12-.658-.38v-1zM12 10a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2m-7.793 1 .865.5v1l-.865.5-.135-.078A8 8 0 0 1 4 12a8 8 0 0 1 .072-.922zm2.598 0 .865.5v1l-.865.5-.104-.06-.762-.44v-1l.762-.44zm10.39 0 .866.5v1l-.866.5-.431-.25-.434-.25v-1zm2.598 0 .154.09A8 8 0 0 1 20 12a8 8 0 0 1-.072.922l-.135.078-.865-.5v-1zM5.506 13.25l.865.5v1l-.865.5-.865-.5v-1zm2.598 0 .132.076a4 4 0 0 0 .733 1.283v.141l-.432.25-.433.25-.866-.5v-1l.434-.25zm-1.3 2.25.866.5v1l-.865.5-.104-.06L5.94 17v-1l.762-.44zm2.598 0 .432.25.434.25v1l-.434.25-.432.25-.431-.25-.434-.25v-1l.432-.25h.002zm1.866.424A4 4 0 0 0 12 16a4 4 0 0 0 .732-.076l.133.076v1l-.761.44-.104.06-.865-.5v-1zM18 16v4h-2l3 3 3-3h-2v-4zm-9.896 1.75.865.5v1l-.13.074a8 8 0 0 1-1.6-.902v-.172zm2.597 0 .865.5v1l-.865.5-.865-.5v-1z'
 const mdiFilamentUp = 'M12 2a10 10 0 0 0-1.129.08 10 10 0 0 0-1.02.18 10 10 0 0 0-1.314.386A10 10 0 0 0 7.672 3H7.67a10 10 0 0 0-1.295.752 10 10 0 0 0-.754.564 10 10 0 0 0-.98.938 10 10 0 0 0-.598.732l-.125.168a10 10 0 0 0-.541.826l-.035.065a10 10 0 0 0-.87 1.957 10 10 0 0 0-.314 1.314 10 10 0 0 0-.105.932v.008A10 10 0 0 0 2 12a10 10 0 0 0 .053.742v.006a10 10 0 0 0 .105.936 10 10 0 0 0 .315 1.314 10 10 0 0 0 .869 1.957l.035.065a10 10 0 0 0 .541.826l.125.168a10 10 0 0 0 .598.732 10 10 0 0 0 .98.938 10 10 0 0 0 .754.564A10 10 0 0 0 7.67 21h.002a10 10 0 0 0 .865.354 10 10 0 0 0 1.315.386 10 10 0 0 0 1.02.18A10 10 0 0 0 12 22a10 10 0 0 0 1.129-.08 10 10 0 0 0 .59-.104 6 6 0 0 1-.676-2.214l-.61-.352v-1l.434-.25.258-.148a6 6 0 0 1 .607-1.692V16l.127-.074a6 6 0 0 1 1.342-1.559 4 4 0 0 0 .563-1.04l.132-.077.56.322A6 6 0 0 1 19 13a6 6 0 0 1 2.834.713l.008-.03a10 10 0 0 0 .105-.931v-.008A10 10 0 0 0 22 12a10 10 0 0 0-.031-.756l-.002-.012a10 10 0 0 0-.113-.921 10 10 0 0 0-.313-1.301 10 10 0 0 0-.38-1.014l-.007-.014-.008-.013a10 10 0 0 0-.488-.967L20.656 7a10 10 0 0 0-.6-.92 10 10 0 0 0-.697-.848 10 10 0 0 0-.968-.921 10 10 0 0 0-.752-.567 10 10 0 0 0-1.309-.756h-.002a10 10 0 0 0-.865-.367 10 10 0 0 0-1.285-.379h-.002a10 10 0 0 0-1.035-.174l-.079-.01A10 10 0 0 0 12 2m-1.299 2.25.432.25.433.25v1l-.865.5-.433-.25-.432-.25v-1l.268-.154zm2.598 0 .865.5v1l-.865.5-.865-.5v-1zm1.883.414a8 8 0 0 1 1.58.91v.176l-.658.38-.208.12-.865-.5v-1zm-6.342.012.129.074v1L8.537 6l-.433.25-.866-.5v-.172a8 8 0 0 1 1.602-.902M6.805 6.5l.865.5v1l-.865.5-.104-.06L5.94 8V7zm2.597 0 .866.5v1l-.434.25-.432.25-.431-.25L8.537 8V7l.432-.25zM12 6.5l.865.5v1l-.12.07A4 4 0 0 0 12 8a4 4 0 0 0-.732.076L11.135 8V7zm2.598 0 .865.5v1l-.865.5-.866-.5V7zm2.597 0 .866.5v1l-.866.5-.865-.5V7zM5.505 8.75l.866.5v1l-.865.5-.865-.5v-1zm2.599 0 .865.5v.14a4 4 0 0 0-.733 1.284l-.132.076-.866-.5v-1zm7.792 0 .866.5v1l-.866.5-.12-.07a4 4 0 0 0-.745-1.287V9.25zm2.598 0 .865.5v1l-.865.5-.207-.12-.658-.38v-1zM12 10a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2m-7.793 1 .865.5v1l-.865.5-.135-.078A8 8 0 0 1 4 12a8 8 0 0 1 .072-.922zm2.598 0 .865.5v1l-.865.5-.104-.06-.762-.44v-1l.762-.44zm10.39 0 .866.5v1l-.866.5-.431-.25-.434-.25v-1zm2.598 0 .154.09A8 8 0 0 1 20 12a8 8 0 0 1-.072.922l-.135.078-.865-.5v-1zM5.506 13.25l.865.5v1l-.865.5-.865-.5v-1zm2.598 0 .132.076a4 4 0 0 0 .733 1.283v.141l-.432.25-.433.25-.866-.5v-1l.434-.25zM19 15l-3 3h2v4h2v-4h2zm-12.195.5.865.5v1l-.865.5-.104-.06L5.94 17v-1l.762-.44zm2.597 0 .432.25.434.25v1l-.434.25-.432.25-.431-.25-.434-.25v-1l.432-.25h.002zm1.866.424A4 4 0 0 0 12 16a4 4 0 0 0 .732-.076l.133.076v1l-.761.44-.104.06-.865-.5v-1zM8.104 17.75l.865.5v1l-.13.074a8 8 0 0 1-1.6-.902v-.172zm2.597 0 .865.5v1l-.865.5-.865-.5v-1z'
 const mdiFilamentChange = 'm23.5 18.5-3-3v2h-4v2h4v2zm-9 0 3 3v-2h4v-2h-4v-2zM12 2a10 10 0 0 0-1.129.08 10 10 0 0 0-1.02.18 10 10 0 0 0-1.314.386A10 10 0 0 0 7.672 3H7.67a10 10 0 0 0-1.295.752 10 10 0 0 0-.754.564 10 10 0 0 0-.98.938 10 10 0 0 0-.598.732 10 10 0 0 0-1.57 3.016 10 10 0 0 0-.315 1.314 10 10 0 0 0-.105.932v.008A10 10 0 0 0 2 12q.012.372.053.742v.006a10 10 0 0 0 .105.936 10 10 0 0 0 .315 1.314 10 10 0 0 0 .904 2.022 10 10 0 0 0 .666.994 10 10 0 0 0 .598.732 10 10 0 0 0 .98.938q.364.3.754.564A10 10 0 0 0 7.67 21h.002a10 10 0 0 0 .865.354 10 10 0 0 0 1.315.386 10 10 0 0 0 1.02.18A10 10 0 0 0 12 22a10 10 0 0 0 1.129-.08 10 10 0 0 0 .59-.104 6 6 0 0 1-.676-2.214l-.61-.352v-1l.434-.25.258-.148a6 6 0 0 1 .607-1.692V16l.127-.074a6 6 0 0 1 1.342-1.559 4 4 0 0 0 .563-1.04l.132-.077.56.322A6 6 0 0 1 19 13a6 6 0 0 1 2.834.713l.008-.03a10 10 0 0 0 .105-.931v-.008A10 10 0 0 0 22 12q0-.378-.031-.756l-.002-.012a10 10 0 0 0-.426-2.222 10 10 0 0 0-.38-1.014l-.007-.014-.008-.013a10 10 0 0 0-.488-.967L20.656 7a10 10 0 0 0-2.265-2.69 10 10 0 0 0-2.06-1.322h-.003a10 10 0 0 0-2.15-.746h-.002a10 10 0 0 0-1.114-.183A10 10 0 0 0 12 2m-1.299 2.25.432.25.433.25v1l-.865.5-.433-.25-.432-.25v-1l.268-.154Zm2.598 0 .865.5v1l-.865.5-.865-.5v-1zm1.883.414a8 8 0 0 1 1.58.91v.176l-.658.38-.208.12-.865-.5v-1zm-6.342.012.129.074v1L8.537 6l-.433.25-.866-.5v-.172a8 8 0 0 1 1.602-.902M6.805 6.5l.865.5v1l-.865.5-.104-.06L5.94 8V7Zm2.597 0 .866.5v1l-.434.25-.432.25-.431-.25L8.537 8V7l.432-.25ZM12 6.5l.865.5v1l-.12.07A4 4 0 0 0 12 8a4 4 0 0 0-.732.076L11.135 8V7Zm2.598 0 .865.5v1l-.865.5-.866-.5V7Zm2.597 0 .866.5v1l-.866.5-.865-.5V7ZM5.505 8.75l.866.5v1l-.865.5-.865-.5v-1zm2.599 0 .865.5v.14a4 4 0 0 0-.733 1.284l-.132.076-.866-.5v-1zm7.792 0 .866.5v1l-.866.5-.12-.07a4 4 0 0 0-.745-1.287V9.25Zm2.598 0 .865.5v1l-.865.5-.207-.12-.658-.38v-1zM12 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4m-7.793 1 .865.5v1l-.865.5-.135-.078A8 8 0 0 1 4 12a8 8 0 0 1 .072-.922Zm2.598 0 .865.5v1l-.865.5-.104-.06-.762-.44v-1l.762-.44zm10.39 0 .866.5v1l-.866.5-.431-.25-.434-.25v-1zm2.598 0 .154.09A8 8 0 0 1 20 12a8 8 0 0 1-.072.922l-.135.078-.865-.5v-1ZM5.506 13.25l.865.5v1l-.865.5-.865-.5v-1zm2.598 0 .132.076a4 4 0 0 0 .733 1.283v.141l-.432.25-.433.25-.866-.5v-1l.434-.25Zm-1.3 2.25.866.5v1l-.865.5-.104-.06L5.94 17v-1l.762-.44zm2.598 0 .432.25.434.25v1l-.434.25-.432.25-.431-.25-.434-.25v-1l.432-.25h.002Zm1.866.424A4 4 0 0 0 12 16q.37-.004.732-.076l.133.076v1l-.761.44-.104.06-.865-.5v-1ZM8.104 17.75l.865.5v1l-.13.074a8 8 0 0 1-1.6-.902v-.172Zm2.597 0 .865.5v1l-.865.5-.865-.5v-1z'
 const mdiFileImageLock = 'M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h6v-2H6l6-6 1.21 1.21C13.377 12.674 15.688 11 18 11c.7 0 1.4.2 2 .4V8l-6-6zm7 1.5L18.5 9H13zM8 9a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2m10 4c-1.4 0-2.8 1.1-2.8 2.5V17c-.6 0-1.2.6-1.2 1.2v3.5c0 .7.6 1.3 1.2 1.3h5.5c.7 0 1.3-.6 1.3-1.2v-3.5c0-.7-.6-1.3-1.2-1.3v-1.5c0-1.4-1.4-2.5-2.8-2.5m0 1.2c.8 0 1.5.5 1.5 1.3V17h-3v-1.5c0-.8.7-1.3 1.5-1.3'
 const mdiFileDocumentLock = 'M12 21.7V18H6v-2h6.9l.3-.3v-.2q0-.75.3-1.5H6v-2h9.1c.8-.6 1.8-1 2.9-1 .7 0 1.4.2 2 .4V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h6zm1-18.2L18.5 9H13ZM20.8 17v-1.5c0-1.4-1.4-2.5-2.8-2.5s-2.8 1.1-2.8 2.5V17c-.6 0-1.2.6-1.2 1.2v3.5c0 .7.6 1.3 1.2 1.3h5.5c.7 0 1.3-.6 1.3-1.2v-3.5c0-.7-.6-1.3-1.2-1.3m-1.3 0h-3v-1.5c0-.8.7-1.3 1.5-1.3s1.5.5 1.5 1.3z'
-
 /**
  * Global, static constants.
  */
@@ -525,7 +540,22 @@ export const Icons = Object.freeze({
   mmuMove: mdiArrowLeftRight,
   mmuUpdateLeds: mdiContentSaveSettingsOutline,
   mmuError: mdiInformationOutline,
-  mmuSelectGate: mdiSwapHorizontal
+  mmuSelectGate: mdiSwapHorizontal,
+  afcIcon: afcIconLogo,
+  afcIconBoxTurtle,
+  afcIconHtlf,
+  afcIconNightOwl,
+  afcIconQuattroBox,
+  afcIconInfinity,
+  afcHelp: mdiLifebuoy,
+  afcTurnOffLed: mdiLightbulbOnOutline,
+  afcTurnOnLed: mdiLightbulbOutline,
+  afcCalibration: mdiWrench,
+  afcSettings: mdiVariable,
+  afcDebugJson: mdiArrowDownBold,
+  afcUnloadLane: mdiArrowUpBold,
+  afcLoadLane: mdiArrowDownBold,
+  afcEjectFilament: mdiEject,
 })
 
 export const Waits = Object.freeze({
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
index 5d563167c4..93b3efa847 100644
--- a/src/locales/en.yaml
+++ b/src/locales/en.yaml
@@ -1,4 +1,84 @@
 app:
+  afc:
+    AfcSettings: "AFC-Settings"
+    BrushNozzle: "Brush Nozzle"
+    BufferDisabled: "Buffer Not Active"
+    BypassActive: "Filament loaded in bypass tool changes are deactivated!"
+    Calibrate: "Calibrate"
+    Cancel: "Cancel"
+    CaptureTd: "Capture TD"
+    DebugJson: "Debug JSON"
+    Detected: "Detected"
+    EjectFilament: "Eject Filament"
+    Ejecting: "Ejecting"
+    Empty: "Empty"
+    Error: "Error"
+    FilamentForLane: "Filament for {name}"
+    Functions: "Functions"
+    Headline: "AFC"
+    Hub: "Hub"
+    HubLoad: "Hub Load"
+    Idle: "Idle"
+    InfiniteSpoolDescription: "Next lane to load if {name} runs out"
+    InfiniteSpoolHeadline: "Infinite Spool"
+    LaneControls: "Lane Controls"
+    LaneLoaded: "Lane Loaded"
+    LaneLoadedNone: "NONE"
+    LaneMapping: "Lane Mapping"
+    LaneMappingToCommand: "Remap {name} to tool command"
+    LedOff: "LEDs Off"
+    LedOn: "LEDs On"
+    LoadedInLane: "Loaded in {lane}"
+    Loading: "Loading"
+    LoadLane: "Load Lane"
+    Material: "Material"
+    MaterialSubtitle: "For example ABS PETG PLA etc."
+    Moving: "Moving"
+    ParkNozzle: "Park Nozzle"
+    PostExtruderSensor: "Post-Extruder Sensor"
+    PreExtruderSensor: "Pre-Extruder Sensor"
+    PrepDetected: "Filament detected but not loaded"
+    Printing: "Printing"
+    RammingSensor: "Ramming Sensor"
+    Restoring: "Restoring"
+    SetSpool: "Set Spool"
+    Settings: "Settings"
+    SettingsDialog:
+      BowdenLength: "Bowden Length"
+      BowdenLengthDescription: "This is the Length of the Bowden tube between the Hub and the Toolhead."
+      DistHub: "Distance to Hub"
+      DistHubDescription: "Distance from the lane extruder gears to the hub in mm."
+      Help: "Help"
+      Length: "Length"
+      LoadUnloadLane: "Load / Unload Lane"
+      LoadUnloadLaneDescription: "Click on the buttons to load or unload the filament from the lane to the extruder."
+      SaveExtruderValues: "Save Extruder Values"
+      SaveExtruderValuesDescription: "This will write the current extruder values to the configuration file of the current extruder."
+      SaveHubDist: "Save Lane Values"
+      SaveHubDistDescription: "Save the values from the specific lane to the configuration file."
+      SensorAfterExtruder: "Sensor after Extruder"
+      SettingsForTitle: "Settings for {name}"
+      ToolSensorAfterExtruder: "Tool Sensor after Extruder"
+      ToolSensorAfterExtruderDescription: "Distance from the extruder gears to the tool_end sensor in mm. This is used to unload the filament from the extruder gears after the tool_end sensor isn't triggered anymore."
+      ToolStn: "Tool load length"
+      ToolStnDescriptionWithEndSensor: "Distance from the tool_end sensor to the begin of the melt zone in mm."
+      ToolStnDescriptionWithoutEndSensor: "Distance from the tool_start sensor to the begin of the melt zone in mm."
+      ToolStnDescriptionWithRamming: "Distance from the extruder gears to the begin of the melt zone in mm."
+      ToolStnUnload: "Tool unload length"
+      ToolStnUnloadDescription: "Distance to retract the filament to unload the filament from the tool in mm."
+      WriteToFile: "Write to File"
+    SettingsForLane: "Settings for {lane}"
+    ShowFilamentName: "Show Filament Name"
+    ShowLaneInfinite: "Show Infinite Button"
+    ShowTool: "Show Tool \"{name}\""
+    ShowUnit: "Show Unit \"{name}\""
+    ShowUnitIcons: "Show Unit Icons"
+    ShowTd1Color: "Show TD-1 Color"
+    Unloading: "Unloading"
+    UnloadLane: "Unload Lane"
+    Unknown: "Unknown"
+    Weight: "Weight"
+    WeightSubtitle: "The weight of the filament in grams (without spool)."
   bedmesh:
     label:
       active: active
@@ -341,6 +421,7 @@ app:
       synced_extruder: Synced Extruder
       thumbnail_size: Thumbnail Size
       time_in_days: Time in days
+      toolchange: Toolchange
       total: Total
       total_filament: Total filament used
       total_filament_avg: Avg per print
diff --git a/src/mixins/afc.ts b/src/mixins/afc.ts
new file mode 100644
index 0000000000..7ea828baf7
--- /dev/null
+++ b/src/mixins/afc.ts
@@ -0,0 +1,141 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import type { KlipperPrinterAfcStateState, KlipperPrinterAfcState, KlipperPrinterAfcLaneSettings, KlipperPrinterAfcStepperSettings, KlipperPrinterAfcExtruderState, KlipperPrinterAfcExtruderSettings, KlipperPrinterAfcBufferState, KlipperPrinterAfcBufferSettings, KlipperPrinterAfcHubState, KlipperPrinterAfcHubSettings, KlipperPrinterAfcLaneState, KlipperPrinterSettings } from '@/store/printer/types'
+
+@Component
+export default class AfcMixin extends Vue {
+  get afc (): KlipperPrinterAfcState | undefined {
+    return this.$typedState.printer.printer.AFC
+  }
+
+  get afcExtruders (): string[] {
+    return this.afc?.extruders ?? []
+  }
+
+  get afcHubs (): string[] {
+    return this.afc?.hubs ?? []
+  }
+
+  get afcUnits (): string[] {
+    return this.afc?.units ?? []
+  }
+
+  get afcLanes (): string[] {
+    return this.afc?.lanes ?? []
+  }
+
+  get afcLoadedSpools (): Record<number, string> {
+    const loadedSpools = this.afcLanes
+      .reduce<Record<number, string>>((loadedSpools, laneName) => {
+        const lane = this.getAfcLaneObject(laneName)
+
+        if (lane?.spool_id) {
+          loadedSpools[lane.spool_id] = lane.name
+        }
+
+        return loadedSpools
+      }, {})
+
+    return loadedSpools
+  }
+
+  get afcErrorState (): boolean {
+    return this.afc?.error_state === true
+  }
+
+  get afcCurrentLane (): KlipperPrinterAfcLaneState | undefined {
+    const laneName = this.afc?.current_load ?? this.afc?.current_lane
+
+    if (laneName != null) {
+      return this.getAfcLaneObject(laneName)
+    }
+  }
+
+  get afcCurrentBuffer (): KlipperPrinterAfcBufferState | undefined {
+    const bufferName = this.afcCurrentLane?.buffer
+
+    if (bufferName != null) {
+      return this.getAfcBufferObject(bufferName)
+    }
+  }
+
+  get afcCurrentState (): KlipperPrinterAfcStateState {
+    return this.afc?.current_state ?? 'Idle'
+  }
+
+  get afcExistsSpoolman (): boolean {
+    return this.$typedGetters['server/componentSupport']('spoolman')
+  }
+
+  get afcShowFilamentName (): boolean {
+    return this.$typedState.config.uiSettings.afc.showFilamentName
+  }
+
+  get afcShowLaneInfinite (): boolean {
+    return this.$typedState.config.uiSettings.afc.showLaneInfinite
+  }
+
+  get afcShowUnitIcons (): boolean {
+    return this.$typedState.config.uiSettings.afc.showUnitIcons
+  }
+
+  get afcShowTd1Color (): boolean {
+    return this.$typedState.config.uiSettings.afc.showTd1Color
+  }
+
+  get afcHiddenExtruders (): string[] {
+    return this.$typedState.config.uiSettings.afc.hiddenExtruders
+  }
+
+  get afcHiddenUnits (): string[] {
+    return this.$typedState.config.uiSettings.afc.hiddenUnits
+  }
+
+  getAfcLaneObject (lane: string): KlipperPrinterAfcLaneState | undefined {
+    const printerState = this.$typedState.printer.printer
+
+    return (
+      printerState[(`AFC_stepper ${lane}`)] ??
+      printerState[(`AFC_lane ${lane}`)]
+    )
+  }
+
+  getAfcLaneSettings (lane: string): KlipperPrinterAfcLaneSettings | KlipperPrinterAfcStepperSettings | undefined {
+    const printerSettings: KlipperPrinterSettings = this.$typedGetters['printer/getPrinterSettings']
+
+    return (
+      printerSettings[`afc_stepper ${lane.toLowerCase()}`] ??
+      printerSettings[`afc_lane ${lane.toLowerCase()}`]
+    )
+  }
+
+  getAfcExtruderObject (extruder: string): KlipperPrinterAfcExtruderState | undefined {
+    return this.$typedState.printer.printer[(`AFC_extruder ${extruder}`)]
+  }
+
+  getAfcExtruderSettings (extruder: string): KlipperPrinterAfcExtruderSettings | undefined {
+    const printerSettings: KlipperPrinterSettings = this.$typedGetters['printer/getPrinterSettings']
+
+    return printerSettings[`afc_extruder ${extruder.toLowerCase()}`]
+  }
+
+  getAfcBufferObject (buffer: string): KlipperPrinterAfcBufferState | undefined {
+    return this.$typedState.printer.printer[`AFC_buffer ${buffer}`]
+  }
+
+  getAfcBufferSettings (buffer: string): KlipperPrinterAfcBufferSettings | undefined {
+    const printerSettings: KlipperPrinterSettings = this.$typedGetters['printer/getPrinterSettings']
+
+    return printerSettings[`afc_buffer ${buffer.toLowerCase()}`]
+  }
+
+  getAfcHubObject (hub: string): KlipperPrinterAfcHubState | undefined {
+    return this.$typedState.printer.printer[`AFC_hub ${hub}`]
+  }
+
+  getAfcHubSettings (hub: string): KlipperPrinterAfcHubSettings | undefined {
+    const printerSettings: KlipperPrinterSettings = this.$typedGetters['printer/getPrinterSettings']
+
+    return printerSettings[`afc_hub ${hub.toLowerCase()}`]
+  }
+}
diff --git a/src/plugins/afcIcons.ts b/src/plugins/afcIcons.ts
new file mode 100644
index 0000000000..2454a231da
--- /dev/null
+++ b/src/plugins/afcIcons.ts
@@ -0,0 +1,12 @@
+export const afcIconBoxTurtle =
+    'M6.404 9.271c.118-.657.3-1.286.569-1.895L5.689 6.37a7.1 7.1 0 0 0-1.332 2.44c.672.221 1.342.348 2.047.461m17.538 5.591c.15.294.007.689-.402.769-.447.089-.891.19-1.336.286l-.21.047v.192l-.001 2.607q.001.071-.001.143c-.013.296-.131.452-.421.513-.422.091-.848.169-1.273.249q-.638.117-1.276.229l-1.733.308-1.75.308-1.907.336c-.432.076-.863.156-1.295.231-.246.042-.491.096-.739.111-.168.009-.341-.032-.509-.066-1.244-.252-2.486-.51-3.729-.764l-3.587-.731a246 246 0 0 1-1.391-.289c-.205-.042-.346-.154-.373-.375-.011-.094-.022-.188-.022-.283q.002-1.474.008-2.947c0-.017-.006-.034-.012-.065h.001l-.001-.001v.001l-.549-.109-.995-.185c-.233-.042-.394-.165-.434-.407a.45.45 0 0 1 .023-.224c.073-.187.158-.371.243-.554l1.635-3.562.062-.128a.58.58 0 0 1 .454-.331c.274-.045.547-.098.824-.149l.114-.638c.137-.767.414-1.485.776-2.17a7.8 7.8 0 0 1 1.996-2.439c1.104-.9 2.363-1.467 3.743-1.772a8.8 8.8 0 0 1 2.301-.185c.23.011.46.043.689.074a7.7 7.7 0 0 1 1.599.389c.487.174.961.376 1.407.639a.5.5 0 0 0 .251.071 4.75 4.75 0 0 1 2.204.545 4.3 4.3 0 0 1 1.618 1.443c.301.447.526.93.636 1.46.083.396.12.795.07 1.203a5 5 0 0 1-.199.918.17.17 0 0 0 .006.114c.057.117.123.229.187.344.307.05.61.102.914.147.236.034.382.174.474.383l.544 1.22q.545 1.229 1.086 2.459c.093.212.175.43.28.635m-.905.022c-.038-.094-.065-.165-.096-.236l-1.079-2.445c-.161-.364-.33-.725-.487-1.091-.053-.122-.13-.175-.26-.16-.04.005-.081.004-.132.007.011.109.023.208.032.306.03.328-.017.639-.195.922-.343.543-1.009.687-1.535.319a1.6 1.6 0 0 1-.344-.331c-.127-.162-.229-.345-.34-.518v.002c-.865.364-1.781.414-2.659.533-.017.251-.009.497-.055.732-.12.61-.625 1.035-1.212 1.032-.426-.003-.78-.183-1.074-.486-.259-.267-.453-.581-.63-.905-.048-.087-.102-.17-.145-.24-.16.023-.296.038-.429.061-.131.022-.26.052-.41.082a490 490 0 0 0 1.866 4.31c1.55-.317 3.077-.625 4.603-.942 1.524-.318 3.052-.617 4.581-.952m-2.784-3.314c.048-.176.027-.356-.004-.53-.041-.226-.095-.45-.219-.645l-.745.837h-.001c.085.147.175.32.286.478a.6.6 0 0 0 .224.169.293.293 0 0 0 .385-.112c.036-.059.055-.129.074-.197m-.468-2.68c.092-.393.1-.787.014-1.182a3.5 3.5 0 0 0-.801-1.588c-.676-.765-1.532-1.181-2.535-1.309a4 4 0 0 0-1.135.03 4.6 4.6 0 0 0-1.651.575c-1.013.594-1.729 1.453-2.193 2.525A6.8 6.8 0 0 0 11 9.608c-.051.328-.104.657-.125.987-.022.343-.005.688-.005 1.071h.001c.513-.005 1.007.045 1.507-.073-.048-.071-.092-.127-.127-.188q-.128-.231.018-.397a.35.35 0 0 1 .404-.083c.106.049.208.115.295.193.259.234.427.536.597.837.148.264.3.526.465.779a.95.95 0 0 0 .504.38c.297.102.534-.026.616-.328.044-.163.043-.327.015-.494-.05-.288-.179-.539-.334-.78-.042-.065-.088-.128-.12-.198-.108-.231.032-.438.287-.431.142.004.246.085.336.179.094.098.173.21.261.318.075 0 .152.007.229-.001.412-.045.825-.087 1.236-.141.365-.049.726-.129 1.057-.292.87-.426 1.442-1.103 1.668-2.056m-5.299-4.699c-.022-.02-.03-.032-.04-.035-.378-.115-.756-.232-1.136-.341a.2.2 0 0 0-.145.034c-.317.247-.63.5-.958.762l.272.204.28.221c.513-.407 1.105-.647 1.727-.845m-2.177-.515-.013-.035c-.841-.043-1.674-.007-2.502.226.065.197.135.38.225.542.156-.025.291-.044.424-.07a2.5 2.5 0 0 1 1.002-.004c.067.014.11.003.159-.041.091-.084.19-.16.284-.242q.211-.187.421-.376m-.139 1.868c-.011-.019-.014-.032-.022-.04q-.066-.058-.132-.12a1.44 1.44 0 0 0-1.027-.423 2.86 2.86 0 0 0-1.657.506c-.655.445-1.126 1.048-1.5 1.735-.027.051-.042.107-.071.18h.195a12 12 0 0 0 1.504-.134 8.7 8.7 0 0 0 1.543-.397.42.42 0 0 0 .229-.18c.25-.393.537-.755.887-1.065.021-.018.036-.043.051-.062m-1.959 3.718.501-1.592a9.7 9.7 0 0 1-3.254.377c-.161.438-.302.854-.351 1.32 1.065.051 2.104.052 3.104-.105m-.087.714c-2.029.28-4.018.11-5.983-.517-.054.351-.107.679-.095 1.02 1.016.173 2.01.353 3.008.51.996.157 1.988.351 2.992.475zm-.969 6.244 1.687-3.735c-2.741-.496-5.474-.936-8.214-1.435L.99 14.61h.001c1.386.275 2.74.545 4.095.812q2.028.399 4.069.798m.169-11.541-.264-.545c-.827.187-2.471 1.19-2.851 1.743l1.091.851c.5-.876 1.134-1.576 2.024-2.049m9.34 2.481c.42.016.724.361.714.784-.01.458-.32.757-.788.77a.744.744 0 0 1-.715-.758c.011-.487.33-.813.789-.796m-1.316 1.413a.5.5 0 0 1 .002.194.716.716 0 0 1-.684.544h-.001c-.409.023-.743-.404-.701-.695.022-.147.1-.222.236-.191.046.011.092.05.122.089.043.055.068.123.105.184.12.203.367.198.481-.01.028-.052.047-.109.073-.161.041-.08.097-.132.198-.116.094.016.148.079.169.162M14.35 7.168c.484-.013.767.442.726.847a.777.777 0 0 1-.82.7c-.413-.015-.721-.408-.705-.775.021-.47.365-.797.799-.772M1.984 15.671'
+export const afcIconHtlf =
+    'M14.406 23.98c-.074.008-.18.016-.23.02h-.313c-.039 0-.14-.012-.218-.02-.47-.066-.922-.195-1.282-.515-.148-.125-.18-.246-.386-.305-.348-.098-.829-.113-1.2-.172-.492-.082-1.023-.187-1.492-.363-.219-.078-.422-.2-.644-.277-.059-.004-.121.039-.176.066-.387.2-.719.484-1.133.652-1.117.461-2.836.57-3.52-.636-.468-.828-.07-2 .282-2.809l.308-.582c-.41-.039-.832-.398-1.02-.758-.07-.136-.097-.297-.175-.43-.215-.074-.414-.09-.617-.195-.715-.37-1.082-1.297-1.027-2.074.003-.09.05-.18.035-.273-.375-.254-.547-.723-.594-1.157-.004-.062.012-.136-.035-.191v-.191c.05-.051.031-.13.035-.192.055-.617.398-1.39.941-1.723.121-.078.45-.168.516-.23.086-.074.2-.379.297-.5.058-.074.32-.27.336-.305.043-.093-.114-.472-.125-.617-.082-.832.511-1.762 1.36-1.91.05-.008.25.012.265-.066.004-.02-.137-.32-.157-.38C2.875 3.403 6.919-.16 11.177.005c3.445.133 6.562 2.527 6.793 6.105 2.008 1.137 3.543 3.09 4.375 5.227 1.133 2.918.89 6.41-.938 8.992-.047.067-.36.442-.36.469-.01.129.536.492.642.605.203.22.261.614.035.832-.403.395-1.727.7-2.23.48-.067-.026-.15-.097-.216-.112-.164-.043-.37.07-.535.105a9 9 0 0 1-.844.16c-.335.043-.8.004-1.082.168-.18.106-.34.25-.527.356-.559.32-1.246.515-1.883.59M9.036 9.363c.26.016.538-.05.8-.027.695.059 1.445.621 1.7 1.266.05.136.062.453.23.48.3.047.996-.113 1.304-.2 3.106-.874 5.035-3.694 3.39-6.804-1.65-3.128-5.772-4-8.795-2.348C5.48 2.922 4.398 5.328 5.348 7.72c.113.281.257.496.418.746l.105-.117c.246-.114.504-.282.77-.344.937-.215 2.129.414 2.394 1.36m11.128.055c-.102-.117-.14-.29-.227-.406-.277-.383-.937-.996-1.308-1.309-.2-.168-.387-.328-.633-.418-.012.13-.121.438-.066.547.078.148.445.344.593.461.38.293.73.633 1.133.898.074.051.434.282.508.227m-9.344 3.45c.063.19-.066.644-.289.675-.277.039-.75-.531-.93-.082-.105.27-.078.512-.324.734-.062.055-.336.227-.41.23-.148.012-.34-.183-.351-.323-.02-.286.285-.254.398-.457.211-.387.035-.946.703-1 .184-.016.363.043.543.043.106-.204.14-.426.32-.583.141-.12.204-.105.282-.308.351-.89-.418-1.766-1.336-1.684-.414.035-.239.52-.48.735-.313.277-1.04.289-1.227-.16-.168-.391.183-.56.496-.372.086.055.176.282.223.02.027-.172-.063-.582-.137-.75-.156-.379-.645-.777-1.063-.809-.472-.035-1.136.254-1.347.7-.133.285-.141.855-.594.789-.274-.04-.29-.453-.266-.664.016-.176.25-.43 0-.489-.804-.187-1.441.614-1.144 1.367.133.336.355.254.633.372.242.101.46.347.457.62 0 .098-.07.227-.028.321.031.066.274.117.356.164.57.332-.063 1.008.363 1.422.117.113.371.176.398.348.055.335-.328.433-.574.296-.27-.14-.562-.609-.597-.91-.024-.203.03-.41.011-.613-.265-.148-.652-.172-.676-.562-.007-.208.16-.415-.136-.5-.36-.102-.66.195-.809.492-.207.418-.156.925.031 1.343.27.614.57.352 1 .625.22.145.254.336.364.555.289-.004.523.024.78.156.313.16.716.543.884.852.027.05.09.312.14.137.164-.543.098-1.633-.027-2.192-.219-.96-.566-1.312-1.07-2.086-.114-.18-.367-.574-.051-.703.258-.101.422.102.566.274.512.593.88 1.367 1.145 2.097.02.059.027.207.09.223.082.02.082-.125.113-.176.063-.105.297-.223.406-.308.25-.192.957-.887 1.219-.93a.285.285 0 0 1 .305.117c.203.254-.075.43-.262.57-.355.258-.727.438-1.027.774-.43.48-.688 1.137-.625 1.785l.039.039c.16-.07.297-.184.457-.254.383-.168.836-.148 1.215-.312.18-.079.32-.23.535-.145.191.074.14.336.05.469-.28.402-1.351.45-1.824.71-.754.419-.863 1.212-.941 1.997.101-.024.187-.082.297-.113.504-.153 1.062 0 1.554-.211.235-.106.489-.41.715-.102.086.117.07.223-.02.332-.245.309-.847.55-1.238.578-.328.024-.69-.078-.992.086-.277.149-.426.485-.523.774.012.023.047 0 .062-.004.227-.09.34-.227.633-.29.184-.038.211-.003.371.008.2.012.172-.125.305-.199a.3.3 0 0 1 .164-.027c.176.02.57.504.781.621.735.41 1.875-.055 2.078-.883.094-.383-.12-.375-.32-.613a3 3 0 0 1-.39-.703c-.055-.164-.067-.446-.196-.551a1.08 1.08 0 0 0-.656-.246c-.418-.02-.344.187-.516.457-.117.191-.484.457-.715.48-.21.024-.476-.078-.492-.32-.031-.453.403-.238.598-.426.105-.097.152-.332.215-.46.297-.633 1.187-.41 1.718-.274.211-.793.868-1.348 1.508-1.805.008-.027-.008-.035-.015-.05a2.5 2.5 0 0 0-.246-.313c-.176-.2-.38-.398-.657-.426m7.176.519H21.8c.207-.012.11-.235.082-.375a10 10 0 0 0-.664-1.903c-.106-.218-.301-.656-.457-.824-.14-.148-.137-.066-.297-.05a1.8 1.8 0 0 1-.582-.075c-.785-.215-1.344-.851-1.992-1.297a19.7 19.7 0 0 0-.016 3.563c.027.32.074.64.121.96m2.531 8.375c-.004-.067-.086-.059-.14-.098-.196-.137-.528-.555-.68-.754-1-1.305-1.656-3.074-2.074-4.656-.535-2.024-.79-4.04-.695-6.133.011-.234.015-.469.027-.703-.172.152-.297.371-.453.539-.07.078-.196.148-.239.227-.074.136-.085.484-.082.648.059.82.04 1.625.122 2.441.242 2.336.835 4.809 2.007 6.852.27.469.828 1.367 1.309 1.605.297.145.59.008.898.032m-5.343-10.813c-.106.02-.329.2-.438.258-.582.324-1.781.7-2.445.742-.18.012-.563-.035-.707.02-.059.027-.149.168-.133.226.016.047.46.336.535.403.09.078.465.566.527.562l2.75-1.289.016-.883-.027-.043a.2.2 0 0 0-.082.004ZM1.89 13.563h.27c.01 0 .12.054.136.066.11.09.086.242.062.367.028.027.293-.125.325-.164.003-.035-.145-.242-.172-.293-.13-.254-.184-.562-.203-.844-.258.207-.375.543-.418.867m13.953 2.855c.047-.082-.172-1.023-.2-1.191a23 23 0 0 1-.28-2.395c-.821.336-1.653.648-2.43 1.066-.59.32-1.309.774-1.676 1.34-.055.078-.242.371-.172.45.14.058.27-.043.422.035.222.12.164.445-.059.539-.242.105-.539-.094-.355.328.023.058.195.36.238.367.066.012.277-.285.406-.32.121-.032.29-.008.352.12.12.247-.192.415-.23.634.699.254 1.437.152 2.128-.063.668-.207 1.27-.543 1.856-.91m2.324-2.18c.074.586.207 1.164.379 1.727.023.082.133.473.176.5.066.039.293.043.386.066.332.078.805.469 1.13.637.046.023.183.105.226.102.066-.004.363-.188.441-.235.203-.125.39-.273.594-.398.102-.063.352-.157.398-.239.125-.214.125-.882.137-1.148.008-.266.05-.652.02-.918-.004-.02 0-.039-.02-.055l-3.867-.043Zm-13.313.867c-.027.032.118.25.137.305.07.188.074.586-.18.63-.097.015-.265-.013-.324-.09-.097-.137-.082-.235-.105-.384-.031-.21-.227-.168-.387-.273-.172-.113-.207-.262-.144-.453.05-.149.191-.281-.051-.34-1.254-.297-1.946 1.625-.875 2.352.289.195.554.132.847.246.325.125.211.48.34.75.246.515.774.402 1.246.402.153.031.243.2.364.285a1.35 1.35 0 0 0-.559-1.082c-.32-.238-.75-.305-1.07-.539-.242-.18-.758-.676-.367-.953.253-.18.457.25.632.355.465.286 1.176.473 1.536.875.03.036.18.286.226.235.094-.91-.281-2.082-1.266-2.32m11.25 2.22c-.394.21-.78.437-1.195.613-.965.41-2.035.632-3.074.39-.02.008-.125.313-.152.371-.543 1.137-2.059 1.645-3.172 1.024-.188-.106-.332-.266-.532-.348-.218.043-.445.02-.664.07-.218.051-.453.207-.656.313a7.25 7.25 0 0 0 5.13 2.433c.034-1.699 1.288-3.398 2.913-3.906a5.2 5.2 0 0 1 1.629-.219Zm3.075.304-.024-.027.418 1.027.086.027.172-.644Zm1.242 2.348c.273-.395.555-.793.762-1.227.097-.207.222-.484.285-.703.023-.09.105-.277-.032-.274-.12.004-.609.274-.71.364-.122.11-.102.324-.141.48-.098.356-.277.688-.387 1.04-.012.07.031.132.07.183.02.027.13.152.153.137m-2.113 1.902c.003-.016-.004-.031-.012-.05-.04-.102-.277-.372-.356-.49a12 12 0 0 1-.964-1.741c-.09-.196-.118-.493-.356-.563-.516-.16-1.375-.05-1.867.168-1.012.453-2.184 1.934-2.082 3.086.02.219.101.328.262.469.101.086.37.297.504.242.167-.074.093-.625.406-.633a.8.8 0 0 1 .222.035c.059.04.067.278.059.352-.016.125-.148.32.055.367.52.125 1.644-.469 2.09-.754.214-.137.496-.328.668-.512.167-.18.117-.246.425-.218.258.023.18.187.305.316.121.133.496-.008.64-.074m-13.23.484c.07-.117.054-.449.175-.508.215-.105.426-.062.43.211.003.27-.23.5.253.473.598-.031 1.102-.285 1.598-.586.031-.015.09-.043.094-.082.004-.043-.031-.066-.063-.094-.136-.129-.355-.234-.515-.351-.438-.32-.926-.84-1.25-1.281-.07-.094-.492-.75-.54-.758-.023-.008-.027.011-.038.027-.153.305-.348.598-.465.918-.192.523-.535 1.594.07 1.95.043.027.207.109.25.081m5.007-16.27c.137-.03.316.11.336.247.086.746-.84 1.285-1.485 1.05-.332-.12-.69-.476-.746-.831-.039-.254.047-.493.348-.45.203.028.223.266.313.414.203.336.656.317.89.024.086-.11.211-.426.344-.453m2.41-.917c.871-.098.98 1.199.184 1.293-.914.11-1.004-1.2-.184-1.293M6.36 5.19c.97-.109.98 1.414-.035 1.274-.683-.09-.695-1.188.035-1.274m0 0'
+export const afcIconLogo =
+    'm11.946 23.702-10.14-5.854V6.142L11.946.288l10.139 5.854V17.85zM2.392 17.51l9.554 5.516 9.553-5.516V6.48L11.946.964 2.392 6.48zm9.554-15.606L3.205 6.949v10.092l2.036 1.175V8.124l6.705-3.87 6.703 3.87v10.092l2.035-1.175V6.949zM15.8 7.42l-3.854 2.226L8.09 7.42 6.054 8.595l4.873 2.813V21.5l1.019.586 1.017-.586V11.408l4.872-2.813z'
+export const afcIconNightOwl =
+    'M23.981 4.616c-.001-.052-.018-.06-.066-.041a.2.2 0 0 0-.045.025c-.166.105-.329.216-.498.316a108 108 0 0 1-1.903 1.095c-.331.183-.656.378-1.006.527-.169.072-.333.154-.5.233a3.2 3.2 0 0 0-.602.378 5 5 0 0 0-.419.388.9.9 0 0 0-.234.364c-.005.018-.034.037-.055.04a8 8 0 0 1-.376.043l-.914.075c-.047.004-.072-.017-.098-.055a5 5 0 0 0-.214-.288c-.026-.032-.037-.056-.007-.088q.023-.028.043-.057c.146-.199.302-.394.437-.601.205-.313.365-.649.467-1.01a3.2 3.2 0 0 0 .139-1.063 3.3 3.3 0 0 0-.217-1.018 5 5 0 0 0-.253-.533.67.67 0 0 0-.257-.289.31.31 0 0 0-.347.038.44.44 0 0 0-.132.243c-.022.089-.039.18-.068.267q-.149.453-.407.856a3.8 3.8 0 0 1-.827.94 2.2 2.2 0 0 1-.736.409c-.356.107-.719.196-1.082.276-.442.098-.88.204-1.293.394-.203.093-.401.194-.544.374q-.011.017-.017.031c-.081-.066-.147-.126-.219-.178-.227-.166-.482-.275-.741-.38-.286-.116-.587-.171-.886-.234-.15-.032-.304-.049-.455-.081a6 6 0 0 1-.41-.103c-.166-.048-.335-.094-.495-.157-.302-.12-.551-.318-.777-.547a4.5 4.5 0 0 1-.609-.8 2.9 2.9 0 0 1-.331-.783c-.035-.13-.069-.261-.113-.388-.073-.211-.309-.279-.476-.132a1.4 1.4 0 0 0-.219.267c-.157.235-.27.491-.354.76a2.4 2.4 0 0 0-.091.387 4 4 0 0 0-.02.794c.026.362.1.712.252 1.042q.24.525.596.979.133.168.271.337a1.3 1.3 0 0 0-.24.352c-.017.036-.046.04-.08.039-.12-.005-.24-.007-.359-.014l-.922-.065c-.045-.003-.067-.031-.089-.064q-.085-.133-.179-.259a3 3 0 0 0-.566-.556 3.3 3.3 0 0 0-.654-.392c-.248-.11-.498-.217-.74-.34-.245-.126-.482-.269-.721-.407a155 155 0 0 1-1.036-.607q-.357-.21-.709-.428c-.165-.103-.324-.215-.487-.322-.016-.011-.043-.021-.057-.015-.013.007-.021.035-.022.054-.016.263-.02.527.015.789.031.229.079.455.16.672.14.372.359.695.627.985a8 8 0 0 0 .354.355c.038.037.053.068.016.114a.3.3 0 0 0-.049.083c-.041.13-.083.26-.115.392a1 1 0 0 0-.013.415c.066.367.209.695.493.95.191.172.381.345.627.439.038.014.045.036.03.075-.057.152-.139.283-.289.361-.072.037-.092.1-.087.178.017.259.131.478.285.676.193.248.419.464.692.625.152.09.312.167.473.241.084.039.177.058.275.089l-.06.04q-.231.131-.464.259c-.09.049-.099.06-.059.156a1 1 0 0 0 .106.197c.095.132.189.266.301.383.127.135.268.258.411.375.116.095.242.177.367.259.235.153.467.31.709.451.286.167.599.275.913.373q.374.117.766.158a.1.1 0 0 1 .064.041c.043.072.075.15.12.219.124.19.245.383.381.563.152.202.328.384.512.557.31.294.635.567 1.01.776.033.018.076.035.092.065.011.02-.015.061-.024.093l-.003.019c-.009.115-.023.229-.025.344-.004.182 0 .365.123.532-.032.005-.048.009-.064.01-.122.009-.244.012-.365.026-.142.017-.283.036-.404.128a1 1 0 0 0-.363.551c-.008.029-.007.061-.02.087-.01.022-.032.047-.053.053-.125.038-.252.07-.377.105-.157.043-.315.082-.47.13-.157.049-.259.159-.274.323a.67.67 0 0 0 .164.535l.027.007-.013.007-.014-.014a.4.4 0 0 0-.166.022c-.051.011-.134.058-.183.073a.23.23 0 0 0-.171.196 1.6 1.6 0 0 0-.003.493c.014.11.08.185.187.223.129.045.259.029.388.009.293-.044.577-.122.857-.218q.191-.065.384-.126c.038-.013.061-.006.081.035a.27.27 0 0 0 .245.16c.242.007.484.009.724-.031a.14.14 0 0 1 .123.035c.054.044.11.092.174.118.342.139.676.135.995-.069.073-.048.087-.045.155.004a.82.82 0 0 0 .774.114c.137-.046.245-.138.359-.22a.2.2 0 0 1 .11-.042q.383-.008.764-.01.043-.001.083.01c.025.009.054.022.068.042.109.155.267.223.444.255.186.034.367-.001.543-.058a.7.7 0 0 0 .181-.094c.045-.032.077-.029.121-.003.074.043.149.087.228.117.233.09.465.049.689-.035.081-.031.15-.096.226-.142a.15.15 0 0 1 .08-.025c.203.008.406.023.609.03.179.006.344-.032.475-.168.012-.011.044-.013.063-.006q.133.047.264.097c.283.099.571.182.867.234a.9.9 0 0 0 .432-.012.295.295 0 0 0 .206-.285.9.9 0 0 0-.059-.3c-.053-.161-.119-.311-.309-.358q.012-.024.021-.038a.57.57 0 0 0 .12-.326c.009-.267-.063-.447-.335-.527-.145-.043-.293-.079-.438-.124a8 8 0 0 1-.375-.132c-.065-.024-.103-.068-.123-.142a1.2 1.2 0 0 0-.117-.29.74.74 0 0 0-.606-.4c-.151-.014-.304-.009-.456-.013l-.073-.004c.032-.059.061-.109.086-.16.07-.149.058-.305.034-.46-.021-.135-.05-.268-.075-.398.093-.049.19-.087.272-.147.204-.148.409-.297.599-.463q.369-.324.676-.71c.216-.268.412-.547.562-.856.016-.032.036-.046.071-.041l.045.003a3.4 3.4 0 0 0 .723-.14c.234-.067.462-.154.689-.243.234-.091.454-.212.663-.351.142-.094.281-.196.428-.283.28-.165.548-.345.758-.596q.2-.237.37-.499c.082-.128.065-.143-.069-.212q-.242-.125-.482-.254l-.075-.038c.023-.018.043-.023.063-.028.08-.022.163-.038.241-.067q.366-.135.685-.361c.303-.213.548-.482.744-.796a.9.9 0 0 0 .135-.324c.031-.198.011-.229-.167-.324a.6.6 0 0 1-.296-.316c-.017-.041-.009-.065.031-.089.092-.053.186-.106.269-.172q.205-.161.394-.339c.218-.209.363-.466.445-.755.035-.124.054-.258.049-.386a1.33 1.33 0 0 0-.182-.655c-.007-.012-.002-.043.008-.053q.114-.109.23-.214c.241-.228.459-.475.612-.771a2.7 2.7 0 0 0 .315-1.128c.01-.239-.008-.479-.016-.718m-5.455 3.74c-.113.159-.16.349-.219.537-.044.141-.105.279-.164.415a1.1 1.1 0 0 1-.257.36c-.07-.41-.171-.8-.331-1.165zm-1.685 1.931a2.46 2.46 0 0 1-.579 1.273 2.7 2.7 0 0 1-1.642.926 4 4 0 0 1-.62.052 1.9 1.9 0 0 1-.547-.097 3 3 0 0 1-.625-.267c-.017-.009-.028-.028-.042-.043l.041-.036c.046-.046.098-.089.138-.141a1.4 1.4 0 0 0 .249-.503c.02-.074.032-.079.093-.03.136.109.279.204.44.275.149.066.306.097.466.11.619.054 1.13-.168 1.548-.619.184-.198.295-.433.368-.69.071-.248.075-.503.029-.751a1.62 1.62 0 0 0-.52-.93q-.118-.103-.242-.202-.025-.018-.053-.034l.012-.025c.016-.009.032-.021.049-.026.19-.056.342-.175.491-.297.039-.032.068-.035.1-.005.121.115.25.223.357.35.192.228.326.493.412.778.092.303.124.613.077.932m-4.845 2.823-.018.038c-.015.032-.033.063-.057.108-.025-.038-.047-.061-.059-.089l-.019-.042c-.109-.246-.22-.491-.323-.739a7 7 0 0 1-.203-.554c-.05-.16-.082-.327-.122-.491-.006-.025-.011-.051-.023-.073-.023-.045-.015-.085.005-.128q.087-.18.163-.363c.034-.085.059-.174.086-.262.018-.058.037-.067.083-.023l.347.351q.044.04.092.074l.037.004a.1.1 0 0 1 .033-.067l.282-.299c.024-.025.043-.053.067-.078q.018-.015.039-.029c.01.015.023.028.029.044.052.143.096.288.156.427.04.094.104.176.154.266.011.019.018.048.012.068-.03.098-.069.193-.097.292a7 7 0 0 1-.538 1.302c-.046.086-.085.175-.126.263m-2.426-.582c-.134-.012-.269-.024-.402-.045a2.3 2.3 0 0 1-.567-.18 3 3 0 0 1-.637-.393 2.7 2.7 0 0 1-.501-.548 2.3 2.3 0 0 1-.43-1.126 2.2 2.2 0 0 1 .08-.857c.059-.196.132-.385.237-.56q.157-.26.385-.462.074-.066.152-.128c.022-.017.043-.026.068-.001.143.147.325.225.514.291q.04.014.078.03c.006.002.011.007.027.017v.001l-.232.167a1.53 1.53 0 0 0-.564.755 1.73 1.73 0 0 0 .534 1.882q.297.256.668.372c.297.091.599.087.901.018.261-.059.493-.18.709-.334.028-.02.053-.043.087-.071q.016.04.025.073c.04.2.114.386.25.542q.056.064.123.119c.034.028.025.042-.007.06a3.3 3.3 0 0 1-.717.296 2.3 2.3 0 0 1-.781.082M6.693 6.315c.026.01.054.016.075.032.242.175.51.307.775.441q.635.321 1.277.632.407.199.816.391c.087.041.177.077.263.119q.333.16.661.329c.3.157.566.361.802.604.2.206.368.439.521.682q.015.025.038.055c.085-.117.16-.232.247-.337.134-.16.27-.32.416-.469.196-.2.421-.363.666-.496.143-.078.284-.161.429-.233.274-.135.552-.263.827-.396q.485-.236.968-.474.552-.274 1.101-.553c.193-.098.382-.2.585-.294-.018.024-.034.053-.056.073a5.4 5.4 0 0 1-1.063.791c-.314.176-.621.363-.939.53-.426.224-.859.434-1.29.649-.38.191-.743.406-1.051.704a4.7 4.7 0 0 0-.524.632c-.102.143-.198.29-.297.435-.028.042-.048.038-.079-.009-.161-.244-.314-.494-.488-.729a2.94 2.94 0 0 0-1.058-.897c-.293-.147-.591-.282-.882-.43q-.496-.25-.982-.517a18 18 0 0 1-.798-.477 5 5 0 0 1-.408-.291c-.179-.142-.351-.292-.526-.439q-.02-.018-.036-.041zm6.633 3.85c.002.184.075.345.169.499.18.294.443.474.78.534.218.038.427-.007.63-.101.356-.164.563-.442.638-.816.066-.333-.021-.641-.22-.914a1 1 0 0 0-.171-.173c-.133-.102-.266-.204-.431-.25-.024-.007-.046-.021-.069-.033q-.004-.001-.013-.016l.13-.064q.079-.035.157-.073a.26.26 0 0 1 .223-.01c.192.078.356.198.493.35.138.152.245.325.305.523.072.233.095.468.042.709a1.63 1.63 0 0 1-.714 1.041 1.54 1.54 0 0 1-.912.276 1.4 1.4 0 0 1-.736-.232 1.25 1.25 0 0 1-.51-.634c-.097-.269-.073-.531.127-.757.033-.038.053-.085.081-.131q-.001.141.001.272m.556-.464c.002-.237.248-.478.488-.472a.49.49 0 0 1 .48.499.494.494 0 0 1-.494.494c-.266-.004-.477-.235-.474-.521m-3.903.027c.017.235-.225.494-.478.491-.271-.003-.483-.216-.488-.53-.004-.23.225-.45.469-.457a.49.49 0 0 1 .497.496m-1.065-.679a1.13 1.13 0 0 0-.598.815 1.1 1.1 0 0 0 .066.599c.116.308.338.515.631.649a.97.97 0 0 0 .809.019 1.16 1.16 0 0 0 .691-.705c.038-.111.06-.227.085-.342.006-.027-.005-.058-.011-.087q-.007-.03-.019-.06l.02-.002c.087.127.185.249.216.404a.6.6 0 0 1 .005.203 1.17 1.17 0 0 1-.479.803 1.5 1.5 0 0 1-.782.296c-.088.009-.18 0-.269-.01-.304-.036-.563-.17-.801-.362a1.7 1.7 0 0 1-.506-.661 1.35 1.35 0 0 1-.046-.983c.132-.402.401-.679.767-.875.093-.049.175-.049.262.011.073.051.152.093.24.146-.103.052-.193.094-.281.142m-3.495-.644.947.092c-.176.386-.3.789-.308 1.224l-.022.005c-.049-.065-.101-.128-.147-.195a2.5 2.5 0 0 1-.402-.943c-.013-.063-.045-.122-.068-.183m1.128 11.493-.013.007-.014-.014z'
+export const afcIconQuattroBox =
+    'M9.207 21.352c-.172-.036-.332-.063-.488-.11a2.5 2.5 0 0 1-.848-.46 2.54 2.54 0 0 1-.719-.93A2 2 0 0 1 6.953 19v-7.82h3.004c0 .07.004.14 0 .215-.008.214-.023.425-.023.64a827 827 0 0 0 0 4.403q-.002.96.027 1.921c.012.348.375.723.754.723h9.414c.348 0 .707-.3.738-.637.04-.453.024-.906.004-1.36-.016-.284-.348-.597-.629-.64a3 3 0 0 0-.351-.027h-8.727v-2.137h.18q5.084-.001 10.164.004c.469 0 .89.168 1.27.438.527.375.878.87 1.027 1.504.004.02.023.035.043.054a196 196 0 0 1 0 3.032c-.028.07-.051.125-.067.18a2.5 2.5 0 0 1-.535.98 2.4 2.4 0 0 1-1.039.722c-.191.067-.395.106-.594.157Zm5.672-18.645c.187.059.371.11.547.176.441.172.789.469 1.07.844.332.449.48.957.48 1.523-.007 2.477-.003 4.957-.003 7.434v.164h-3.008v-.157q-.001-3.463.004-6.921c0-.45-.414-.829-.824-.825q-4.652.006-9.31 0a.833.833 0 0 0-.812.817c0 .332.004.668-.003 1-.008.472.402.851.851.851q4.344-.005 8.688-.004h.183v2.137h-.137c-3.437 0-6.875.004-10.312-.004-.34 0-.652-.125-.945-.293A2.57 2.57 0 0 1 .262 8.258c-.07-.156-.117-.32-.184-.485a206 206 0 0 1 0-3.109c.02-.031.035-.05.043-.07.195-.719.617-1.262 1.274-1.61.238-.125.503-.187.757-.277zm0 0'
+export const afcIconInfinity =
+    'M17.445 4.941c-3.625 0-6.57 3.149-6.57 7.012 0 2.54-1.937 4.606-4.32 4.606-2.38 0-4.317-2.067-4.317-4.606s1.934-4.605 4.317-4.605c.86 0 1.691.265 2.402.773.234.172.457.367.656.582a1.104 1.104 0 0 0 1.594.004c.441-.469.441-1.23.004-1.703a6.6 6.6 0 0 0-1-.875 6.24 6.24 0 0 0-3.656-1.184c-3.621-.004-6.57 3.145-6.57 7.008s2.949 7.008 6.57 7.008c3.625 0 6.57-3.145 6.57-7.008 0-2.539 1.938-4.605 4.32-4.605s4.32 2.066 4.32 4.605-1.937 4.606-4.32 4.606c-1.152 0-2.238-.477-3.054-1.348a1.1 1.1 0 0 0-1.59 0 1.23 1.23 0 0 0-.332.851c0 .32.117.622.332.848 1.238 1.324 2.89 2.05 4.644 2.05 3.625 0 6.57-3.144 6.57-7.007s-2.945-7.012-6.57-7.012m0 0'
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index f5154c80cd..fbd06d2dbe 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -87,3 +87,7 @@ textarea.clipboard-copy {
   z-index: 100000;
   opacity: 0;
 }
+
+.fill-width {
+    width: 100% !important;
+}
diff --git a/src/store/afc/actions.ts b/src/store/afc/actions.ts
new file mode 100644
index 0000000000..3e8e77bb42
--- /dev/null
+++ b/src/store/afc/actions.ts
@@ -0,0 +1,12 @@
+import type { ActionTree } from 'vuex'
+import type { RootState } from '../types'
+import type { AfcState } from './types'
+
+export const actions = {
+  /**
+   * Reset our store
+   */
+  async reset ({ commit }) {
+    commit('setReset')
+  }
+} satisfies ActionTree<AfcState, RootState>
diff --git a/src/store/afc/getters.ts b/src/store/afc/getters.ts
new file mode 100644
index 0000000000..b69711d707
--- /dev/null
+++ b/src/store/afc/getters.ts
@@ -0,0 +1,6 @@
+import type { GetterTree } from 'vuex'
+import type { AfcState } from './types'
+import type { RootState } from '../types'
+
+export const getters = {
+} satisfies GetterTree<AfcState, RootState>
diff --git a/src/store/afc/index.ts b/src/store/afc/index.ts
new file mode 100644
index 0000000000..c8cce5f40d
--- /dev/null
+++ b/src/store/afc/index.ts
@@ -0,0 +1,17 @@
+import type { Module } from 'vuex'
+import { state } from './state'
+import { getters } from './getters'
+import { actions } from './actions'
+import { mutations } from './mutations'
+import type { AfcState } from './types'
+import type { RootState } from '../types'
+
+const namespaced = true
+
+export const afc = {
+  namespaced,
+  state,
+  getters,
+  actions,
+  mutations
+} satisfies Module<AfcState, RootState>
diff --git a/src/store/afc/mutations.ts b/src/store/afc/mutations.ts
new file mode 100644
index 0000000000..577c4c5eae
--- /dev/null
+++ b/src/store/afc/mutations.ts
@@ -0,0 +1,16 @@
+import type { MutationTree } from 'vuex'
+import type { AfcDialogState, AfcState } from './types'
+import { defaultState } from './state'
+
+export const mutations = {
+  /**
+   * Reset state
+   */
+  setReset (state) {
+    Object.assign(state, defaultState())
+  },
+
+  setDialogState (state, payload: AfcDialogState) {
+    state.dialog = payload
+  },
+} satisfies MutationTree<AfcState>
diff --git a/src/store/afc/state.ts b/src/store/afc/state.ts
new file mode 100644
index 0000000000..206731c651
--- /dev/null
+++ b/src/store/afc/state.ts
@@ -0,0 +1,11 @@
+import type { AfcState } from './types'
+
+export const defaultState = (): AfcState => {
+  return {
+    dialog: {
+      show: false
+    }
+  }
+}
+
+export const state = defaultState()
diff --git a/src/store/afc/types.ts b/src/store/afc/types.ts
new file mode 100644
index 0000000000..895d4752ec
--- /dev/null
+++ b/src/store/afc/types.ts
@@ -0,0 +1,8 @@
+export interface AfcState {
+  dialog: AfcDialogState;
+}
+
+export interface AfcDialogState {
+  show: boolean;
+  filename?: string;
+}
diff --git a/src/store/config/state.ts b/src/store/config/state.ts
index d938bfc6e4..ff677be8f9 100644
--- a/src/store/config/state.ts
+++ b/src/store/config/state.ts
@@ -155,6 +155,14 @@ export const defaultState = (): ConfigState => {
         showName: true,
         showLogos: false,
         showUnavailableSpoolColor: false
+      },
+      afc: {
+        hiddenExtruders: [],
+        hiddenUnits: [],
+        showFilamentName: false,
+        showLaneInfinite: true,
+        showUnitIcons: true,
+        showTd1Color: true,
       }
     }
   }
diff --git a/src/store/config/types.ts b/src/store/config/types.ts
index bb00b8dddf..ecf26d5596 100644
--- a/src/store/config/types.ts
+++ b/src/store/config/types.ts
@@ -26,6 +26,7 @@ export interface UiSettings {
   spoolman: SpoolmanConfig;
   history: HistoryConfig;
   mmu: MmuConfig;
+  afc: AfcConfig;
 }
 
 export interface WarningsConfig {
@@ -70,6 +71,15 @@ export interface MmuConfig {
   showUnavailableSpoolColor: boolean;
 }
 
+export interface AfcConfig {
+  hiddenExtruders: string[];
+  hiddenUnits: string[];
+  showFilamentName: boolean;
+  showLaneInfinite: boolean;
+  showUnitIcons: boolean;
+  showTd1Color: boolean;
+}
+
 export interface HostConfig {
   endpoints: string[];
   blacklist: string[];
diff --git a/src/store/index.ts b/src/store/index.ts
index 60d3ddf147..6f167b22d9 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -31,6 +31,7 @@ import { mmu } from './mmu'
 import { sensors } from './sensors'
 import { database } from './database'
 import { analysis } from './analysis'
+import { afc } from './afc'
 
 Vue.use(Vuex)
 
@@ -62,7 +63,8 @@ export const storeOptions = {
     mmu,
     sensors,
     database,
-    analysis
+    analysis,
+    afc
   } satisfies RootModules,
   mutations: {},
   actions: {
diff --git a/src/store/layout/state.ts b/src/store/layout/state.ts
index 5de1d0687c..2a1276a16a 100644
--- a/src/store/layout/state.ts
+++ b/src/store/layout/state.ts
@@ -33,7 +33,8 @@ export const defaultState = (): LayoutState => {
           { id: 'job-queue-card', enabled: false, collapsed: false },
           { id: 'gcode-preview-card', enabled: true, collapsed: false },
           { id: 'bed-mesh-card', enabled: false, collapsed: false },
-          { id: 'beacon-card', enabled: false, collapsed: false }
+          { id: 'beacon-card', enabled: false, collapsed: false },
+          { id: 'afc-card', enabled: true, collapsed: false }
         ]
       },
       diagnostics: {
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index abb33b4307..6046cab5de 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -1179,5 +1179,9 @@ export const getters = {
       exclude_object != null &&
       exclude_object.objects.length > 0
     )
+  },
+
+  getSupportsAfc: (state): boolean => {
+    return state.printer.AFC != null
   }
 } satisfies GetterTree<PrinterState, RootState>
diff --git a/src/store/printer/types.ts b/src/store/printer/types.ts
index 35a2f36b9b..06794038ce 100644
--- a/src/store/printer/types.ts
+++ b/src/store/printer/types.ts
@@ -36,6 +36,8 @@ export type TmcKey = `tmc${'2130' | '2208' | '2209' | '2660' | '2240' | '5160'}
 
 export type MmuUnitKey = `unit_${Digit}` | `unit_${NonZeroDigit}${Digit}`
 
+export type AfcUnitKey = `${'AFC_BoxTurtle' | 'AFC_NightOwl' | 'AFC_QuattroBox' | 'AFC_HTLF'} ${string}`
+
 type KlipperPrinterStateBaseType =
   {
     // These keys are always available
@@ -182,6 +184,22 @@ type KlipperPrinterStateBaseType =
     mmu_leds: KlipperPrinterMmuLedsState;
 
     mmu_machine: KlipperPrinterMmuMachineState;
+
+    AFC: KlipperPrinterAfcState;
+
+    [key: `AFC_extruder ${string}`]: KlipperPrinterAfcExtruderState;
+
+    [key: `AFC_buffer ${string}`]: KlipperPrinterAfcBufferState;
+
+    [key: `AFC_lane ${string}`]: KlipperPrinterAfcLaneState;
+
+    [key: `AFC_stepper ${string}`]: KlipperPrinterAfcLaneState;
+
+    [key: `AFC_hub ${string}`]: KlipperPrinterAfcHubState;
+
+    [key: `AFC_led ${string}`]: KlipperPrinterLedState;
+
+    [key: AfcUnitKey]: KlipperPrinterAfcUnitState;
   }>
 
 export interface KlipperPrinterState extends KlipperPrinterStateBaseType {
@@ -734,6 +752,113 @@ export interface KlipperPrinterMmuMachineState extends KlipperPrinterMmuMachineS
   num_units: number;
 }
 
+export type KlipperPrinterAfcStateState = 'Initialized' | 'Idle' | 'Error' | 'Loading' | 'Unloading' | 'Ejecting' | 'Moving' | 'Restoring'
+
+export interface KlipperPrinterAfcState {
+  current_load: string | null;
+  current_lane: string | null;
+  next_lane: string | null;
+  current_state: KlipperPrinterAfcStateState;
+  current_toolchange: number;
+  number_of_toolchanges: number;
+  spoolman: string | null;
+  td1_present: boolean;
+  lane_data_enabled: boolean;
+  error_state: boolean;
+  bypass_state: boolean;
+  quiet_mode: boolean;
+  position_saved: boolean;
+
+  extruders: string[];
+  hubs: string[];
+  units: string[];
+  lanes: string[];
+  buffers: string[];
+  message: {
+    message: string | null;
+    type: string | null;
+  }
+  led_state: boolean;
+}
+
+export interface KlipperPrinterAfcExtruderState {
+  tool_stn: number;
+  tool_stn_unload: number;
+  tool_sensor_after_extruder: number;
+  tool_unload_speed: number;
+  tool_load_speed: number;
+  buffer: string | null;
+  lane_loaded: string | null;
+  tool_start: string | null;
+  tool_start_status: boolean;
+  tool_end: string | null;
+  tool_end_status: boolean;
+  lanes: string[];
+}
+
+export type KlipperPrinterAfcBufferStatus = 'Unknown' | 'Advancing' | 'Trailing'
+
+export interface KlipperPrinterAfcBufferState {
+  state: KlipperPrinterAfcBufferStatus;
+  lanes: string[];
+  enabled: boolean;
+}
+
+export type KlipperPrinterAfcLaneStatus = 'None' | 'Error' | 'Loaded' | 'Tooled' | 'Tool Loaded' | 'Tool Loading' | 'Tool Unloading' | 'HUB Loading' | 'Ejecting' | 'Calibrating'
+
+export interface KlipperPrinterAfcLaneState {
+  name: string;
+  unit: string;
+  hub: string | null;
+  extruder: string | null;
+  buffer: string | null;
+  buffer_status: KlipperPrinterAfcBufferStatus | null;
+  lane: number;
+  map: string | null;
+  load: boolean;
+  prep: boolean;
+  tool_loaded: boolean;
+  loaded_to_hub: boolean;
+  material: string | null;
+  density?: number;
+  diameter?: number;
+  empty_spool_weight?: number;
+  spool_id: number | null;
+  color: string | null;
+  weight: number;
+  extruder_temp: number | null;
+  runout_lane: string | null;
+  filament_status: 'In Tool' | 'Ready' | 'Prep' | 'Not Ready';
+  filament_status_led: string;
+  status: KlipperPrinterAfcLaneStatus;
+  dist_hub: number;
+  td1_data?: Record<string, unknown>;
+  td1_td?: string;
+  td1_color?: string;
+  td1_scan_time?: string;
+}
+
+export interface KlipperPrinterAfcHubState {
+  state: boolean;
+  cut: boolean;
+  cut_cmd: string | null;
+  cut_dist: number;
+  cut_clear: number;
+  cut_min_length: number;
+  cut_servo_pass_angle: number;
+  cut_servo_clip_angle: number;
+  cut_servo_prep_angle: number;
+  lanes: string[];
+  afc_bowden_length: number;
+}
+
+export interface KlipperPrinterAfcUnitState {
+  lanes: string[];
+  extruders: string[];
+  hubs: string[];
+  buffers: string[];
+}
+
 export interface KlipperPrinterConfig extends Record<string, Record<string, string | undefined> | undefined> {
 }
 
@@ -848,6 +973,26 @@ type KlipperPrinterSettingsBaseType =
     scanner: KlipperPrinterCartographerScannerSettings;
 
     [key: `beacon model ${Lowercase<string>}`]: KlipperPrinterBeaconModelSettings;
+
+    afc: KlipperPrinterAfcSettings;
+
+    afc_prep: KlipperPrinterAfcPrepSettings;
+
+    afc_form_tip: KlipperPrinterAfcFormTipSettings;
+
+    [key: `afc_extruder ${Lowercase<string>}`]: KlipperPrinterAfcExtruderSettings;
+
+    [key: `afc_buffer ${Lowercase<string>}`]: KlipperPrinterAfcBufferSettings;
+
+    [key: `afc_led ${Lowercase<string>}`]: KlipperPrinterAfcLedSettings;
+
+    [key: `afc_lane ${Lowercase<string>}`]: KlipperPrinterAfcLaneSettings;
+
+    [key: `afc_stepper ${Lowercase<string>}`]: KlipperPrinterAfcStepperSettings;
+
+    [key: `afc_hub ${Lowercase<string>}`]: KlipperPrinterAfcHubSettings;
+
+    [key: `afc_button ${Lowercase<string>}`]: KlipperPrinterAfcButtonSettings;
   }>
 
 export interface KlipperPrinterSettings extends KlipperPrinterSettingsBaseType {
@@ -1416,6 +1561,230 @@ export interface KlipperPrinterCartographerScannerSettings extends Record<string
 export interface KlipperPrinterBeaconModelSettings extends Record<string, unknown> {
 }
 
+export interface KlipperPrinterAfcSettings {
+  varfile: string;
+  long_moves_speed: number;
+  rev_long_moves_speed_factor: number;
+  long_moves_accel: number;
+  short_moves_speed: number;
+  quiet_moves_speed: number;
+  short_moves_accel: number;
+  short_move_dis: number;
+  max_move_dis: number;
+  show_quiet_mode: boolean;
+  global_print_current: number;
+  enable_sensors_in_gui: boolean;
+  default_material_temps: string[];
+  default_material_type: string;
+  common_density_values: string[];
+  load_to_hub: boolean;
+  moonraker_port: number;
+  moonraker_host: string;
+  moonraker_timeout: number;
+  assisted_unload: boolean;
+  pause_when_bypass_active: boolean;
+  debug: boolean;
+  trsync_update: boolean;
+  trsync_timeout: number;
+  trsync_single_timeout: number;
+  z_hop: number;
+  resume_speed: number;
+  resume_z_speed: number;
+  led_name: string;
+  led_fault: string;
+  led_ready: string;
+  led_not_ready: string;
+  led_loading: string;
+  led_tool_loaded: string;
+  led_buffer_advancing: string;
+  led_buffer_trailing: string;
+  led_buffer_disable: string;
+  led_spool_illuminate: string;
+  n20_break_delay_time: number;
+  tool_max_unload_attempts: number;
+  tool_homing_distance: number;
+  tool_max_load_checks: number;
+  unload_on_runout: boolean;
+  print_short_stats: boolean;
+  show_macros: boolean;
+  error_timeout: number;
+  auto_home: boolean;
+  auto_level_macro?: string;
+  enable_assist: boolean;
+  enable_assist_weight: number;
+  debounce_delay: number;
+  test_extrude_amt: number;
+  capture_td1_when_loaded: boolean;
+  disable_weight_check: boolean;
+  tool_cut: boolean;
+  tool_cut_cmd: string;
+  tool_cut_threshold: number;
+  park: boolean;
+  park_cmd: string;
+  poop: boolean;
+  poop_cmd: string;
+  kick: boolean;
+  kick_cmd: string;
+  wipe: boolean;
+  wipe_cmd: string;
+  form_tip: boolean;
+  form_tip_cmd: string;
+}
+
+export interface KlipperPrinterAfcPrepSettings {
+  enable: boolean;
+  delay_time: number;
+  disable_unload_filament_remapping: boolean;
+  capture_td1_data: boolean;
+}
+
+export interface KlipperPrinterAfcFormTipSettings {
+  ramming_volume: number;
+  toolchange_temp: number;
+  unloading_speed_start: number;
+  unloading_speed: number;
+  cooling_tube_position: number;
+  cooling_tube_length: number;
+  initial_cooling_speed: number;
+  final_cooling_speed: number;
+  cooling_moves: number;
+  use_skinnydip: boolean;
+  skinnydip_distance: number;
+  dip_insertion_speed: number;
+  dip_extraction_speed: number;
+  melt_zone_pause: number;
+  cooling_zone_pause: number;
+}
+
+export interface KlipperPrinterAfcExtruderSettings {
+  pin_tool_start: string | null;
+  pin_tool_end: string | null;
+  tool_stn: number;
+  tool_stn_unload: number;
+  tool_sensor_after_extruder: number;
+  tool_unload_speed: number;
+  tool_load_speed?: number;
+  buffer: string | null;
+  enable_sensors_in_gui: boolean;
+  debounce_delay: number;
+}
+
+export interface KlipperPrinterAfcBufferSettings {
+  advance_pin: string;
+  trailing_pin: string;
+  multiplier_high: number;
+  multiplier_low: number;
+  led_index: string;
+  accel: number;
+}
+
+export interface KlipperPrinterAfcLedSettings {
+  pin: string;
+  chain_count: number;
+  color_order: string[];
+  initial_red: number;
+  initial_green: number;
+  initial_blue: number;
+  initial_white: number;
+}
+
+export interface KlipperPrinterAfcLaneSettings {
+  unit: string;
+  step_pin: string;
+  dir_pin: string;
+  enable_pin: string;
+  microsteps: number;
+  rotation_distance: number;
+  gear_ratio?: [number, number][];
+  map?: string | null;
+  dist_hub: number;
+  park_dist: number;
+  led_index: string;
+  afc_motor_rwd: string;
+  afc_motor_fwd: string;
+  afc_motor_enb: string;
+  rwd_speed_multiplier: number;
+  fwd_speed_multiplier: number;
+  pwm: boolean;
+  prep: string;
+  load: string;
+  led_fault: string;
+  led_ready: string;
+  led_not_ready: string;
+  led_loading: string;
+  led_unloading: string;
+  led_tool_loaded: string;
+  led_spool_index: string;
+  led_spool_illuminate: string;
+  long_moves_speed: number;
+  rev_long_moves_speed_factor: number;
+  long_moves_accel: number;
+  quiet_moves_speed: number;
+  short_moves_speed: number;
+  short_moves_accel: number;
+  short_move_dis: number;
+  max_move_dis: number;
+  n20_break_delay_time: number;
+  enable_assist: boolean;
+  enable_assist_weight: number;
+  timer_delay: number;
+  enable_kick_start: boolean;
+  kick_start_time: number;
+  delta_movement: number;
+  mm_movement: number;
+  cycles_per_rotation: number;
+  pwm_value: number;
+  spoolrate: number;
+  load_to_hub: boolean;
+  enable_sensors_in_gui: boolean;
+  sensor_to_show?: string;
+  assisted_unload: boolean;
+  filament_diameter: number;
+  filament_density: number;
+  spool_inner_diameter: number;
+  spool_outer_diameter: number;
+  empty_spool_weight: number;
+  spool_weight: number;
+  assist_max_motor_rpm: number;
+  hub?: string;
+  buffer?: string;
+  extruder?: string | null;
+  debounce_delay: number;
+  capture_td1_when_loaded: boolean;
+  td1_device_id?: string;
+}
+
+export interface KlipperPrinterAfcStepperSettings extends KlipperPrinterAfcLaneSettings {
+  print_current: number;
+}
+
+export interface KlipperPrinterAfcHubSettings {
+  switch_pin: string;
+  hub_clear_move_dis: number;
+  afc_bowden_length: number;
+  afc_unload_bowden_length: number;
+  td1_bowden_length: number;
+  assisted_retract: boolean;
+  move_dis: number;
+  cut: boolean;
+  cut_cmd: string;
+  cut_servo_name: string;
+  cut_dist: number;
+  cut_clear: number;
+  cut_min_length: number;
+  cut_servo_pass_angle: number;
+  cut_servo_clip_angle: number;
+  cut_servo_prep_angle: number;
+  cut_confirm: boolean;
+  enable_sensors_in_gui: boolean;
+  debounce_delay: number;
+}
+
+export interface KlipperPrinterAfcButtonSettings {
+  pin: string;
+  long_press_duration: number;
+}
+
 // Custom classes start here
 
 export interface KnownExtruder {
diff --git a/src/store/types.ts b/src/store/types.ts
index ae1a517e3a..2f3924695f 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -25,6 +25,7 @@ import type { mmu } from './mmu'
 import type { sensors } from './sensors'
 import type { database } from './database'
 import type { analysis } from './analysis'
+import type { afc } from './afc'
 import type { storeOptions } from '.'
 
 type RootModulesType = {
@@ -53,7 +54,8 @@ type RootModulesType = {
   mmu: typeof mmu,
   sensors: typeof sensors,
   database: typeof database,
-  analysis: typeof analysis
+  analysis: typeof analysis,
+  afc: typeof afc
 }
 
 type RootStateType = {
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 4060a665b8..038fe33973 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -57,6 +57,7 @@ import MmuCard from '@/components/widgets/mmu/MmuCard.vue'
 import SensorsCard from '@/components/widgets/sensors/SensorsCard.vue'
 import RunoutSensorsCard from '@/components/widgets/runout-sensors/RunoutSensorsCard.vue'
 import BeaconCard from '@/components/widgets/beacon/BeaconCard.vue'
+import AfcCard from '@/components/widgets/afc/AfcCard.vue'
 import type { KlipperPrinterSettings } from '@/store/printer/types'
 
 @Component({
@@ -78,7 +79,8 @@ import type { KlipperPrinterSettings } from '@/store/printer/types'
     MmuCard,
     SensorsCard,
     RunoutSensorsCard,
-    BeaconCard
+    BeaconCard,
+    AfcCard
   }
 })
 export default class Dashboard extends Mixins(StateMixin) {
@@ -151,6 +153,10 @@ export default class Dashboard extends Mixins(StateMixin) {
     return this.$typedState.printer.printer.mmu != null
   }
 
+  get supportsAfc (): boolean {
+    return this.$typedGetters['printer/getSupportsAfc']
+  }
+
   get hasMacros (): boolean {
     return this.$typedGetters['macros/getVisibleMacros'].length > 0
   }
@@ -226,6 +232,7 @@ export default class Dashboard extends Mixins(StateMixin) {
     if (item.id === 'mmu-card' && !this.supportsMmu) return true
     if (item.id === 'sensors-card' && !this.hasSensors) return true
     if (item.id === 'temperature-card' && !this.hasHeatersOrTemperatureSensors) return true
+    if (item.id === 'afc-card' && !this.supportsAfc) return true
 
     // Otherwise return the opposite of whatever the enabled state is.
     return !item.enabled
diff --git a/tools/svgo.mjs b/tools/svgo.mjs
index f51e116ede..0dc3b6d0e4 100644
--- a/tools/svgo.mjs
+++ b/tools/svgo.mjs
@@ -6,6 +6,9 @@ import svgoConfig from '../svgo.config.mjs'
 const filesWithSvgs = {
   'src/globals.ts': [
     /(const mdi\S+ = ')([^']*)'/g
+  ],
+  'src/plugins/afcIcons.ts': [
+    /(const afc\S+ =\s+')([^']*)'/g
   ]
 }