diff --git a/src/components/dialogs/AfcChangeSpoolDialog.vue b/src/components/dialogs/AfcChangeSpoolDialog.vue
index dc83faeff..1c9aa5c8a 100644
--- a/src/components/dialogs/AfcChangeSpoolDialog.vue
+++ b/src/components/dialogs/AfcChangeSpoolDialog.vue
@@ -11,8 +11,10 @@
                         <v-icon>{{ mdiCloseThick }}</v-icon>
                     </v-btn>
                 </template>
+
                 <v-card-title>
                     <v-text-field
+                        v-if="spoolManagerUrl"
                         v-model="search"
                         :append-icon="mdiMagnify"
                         :label="$t('Panels.SpoolmanPanel.Search')"
@@ -29,6 +31,7 @@
                         <v-icon>{{ mdiEject }}</v-icon>
                     </v-btn>
                     <v-btn
+                        v-if="spoolManagerUrl"
                         :title="$t('Panels.SpoolmanPanel.Refresh')"
                         class="px-2 minwidth-0 ml-3"
                         :loading="loadings.includes('refreshSpools')"
@@ -36,6 +39,7 @@
                         <v-icon>{{ mdiRefresh }}</v-icon>
                     </v-btn>
                     <v-btn
+                        v-if="spoolManagerUrl"
                         :title="$t('Panels.SpoolmanPanel.OpenSpoolManager')"
                         class="px-2 minwidth-0 ml-3"
                         @click="openSpoolManager">
@@ -44,6 +48,7 @@
                 </v-card-title>
                 <v-card-text class="px-0 pb-0">
                     <v-data-table
+                        v-if="spoolManagerUrl"
                         :headers="headers"
                         :items="spools"
                         item-key="id"
@@ -66,6 +71,55 @@
                                 @set-spool="setSpool" />
                         </template>
                     </v-data-table>
+
+                    <div v-else>
+                        <v-container>
+                            <v-row align="center">
+                                <!-- Color Picker with Label -->
+                                <v-col cols="12" md="6" class="d-flex justify-center align-center">
+                                    <div class="color-picker-container">
+                                        <label class="color-picker-label"><h3>Filament Color</h3></label>
+                                        <v-color-picker v-model="spoolColor" flat class="color-picker" />
+                                    </div>
+                                </v-col>
+
+                                <!-- Right Aligned Text Boxes and Button -->
+                                <v-col cols="12" md="6">
+                                    <div class="text-box-container" style="display: flex; flex-direction: row">
+                                        <!-- Text Boxes -->
+                                        <v-row>
+                                            <v-col cols="12">
+                                                <v-text-field
+                                                    v-model="spoolColor"
+                                                    :label="$t('Panels.AfcSpoolmanPanel.SpoolColor')"
+                                                    outlined />
+                                            </v-col>
+                                            <v-col cols="12">
+                                                <v-text-field
+                                                    v-model="filamentType"
+                                                    :label="$t('Panels.AfcSpoolmanPanel.FilamentType')"
+                                                    outlined />
+                                            </v-col>
+                                            <v-col cols="12">
+                                                <v-text-field
+                                                    v-model="remainingWeight"
+                                                    :label="$t('Panels.AfcSpoolmanPanel.RemainingWeight')"
+                                                    outlined
+                                                    type="number" />
+                                            </v-col>
+                                        </v-row>
+                                    </div>
+                                </v-col>
+                            </v-row>
+                            <v-row style="width: 100%; margin-top: 16px">
+                                <v-col cols="12">
+                                    <v-btn color="primary" block @click="updateSpool">
+                                        {{ $t('Panels.AfcSpoolmanPanel.UpdateSpool') }}
+                                    </v-btn>
+                                </v-col>
+                            </v-row>
+                        </v-container>
+                    </div>
                 </v-card-text>
             </panel>
         </v-dialog>
@@ -93,6 +147,10 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
     mdiRefresh = mdiRefresh
     mdiEject = mdiEject
 
+    filamentType = ''
+    remainingWeight = 0
+    spoolColor = '#ffffff'
+
     @Prop({ required: true }) declare readonly showDialog: boolean
 
     search = ''
@@ -145,6 +203,53 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
         return this.$store.state.server.config.config?.spoolman?.server ?? null
     }
 
+    updateSpool() {
+        console.log('Updating spool with the following data:')
+        console.log('Filament Type:', this.filamentType)
+        console.log('Remaining Weight:', this.remainingWeight)
+        console.log('Spool Color:', this.spoolColor)
+
+        if (this.laneData != null) {
+            const cleanedColor = this.spoolColor.replace('#', '')
+
+            const setColor = `SET_COLOR LANE=${this.laneData.laneName} COLOR=${cleanedColor}`
+            const setWeight = `SET_WEIGHT LANE=${this.laneData.laneName}  WEIGHT=${this.remainingWeight}`
+            const setMaterial = `SET_MATERIAL LANE=${this.laneData.laneName}  MATERIAL=${this.filamentType}`
+
+            this.$nextTick(async () => {
+                try {
+                    await this.$store.dispatch('printer/sendGcode', setColor)
+                    await this.$store.dispatch('printer/sendGcode', setWeight)
+                    await this.$store.dispatch('printer/sendGcode', setMaterial)
+                } catch (error) {
+                    console.error('Failed to send G-code:', error)
+                }
+            })
+
+            this.close()
+        }
+    }
+
+    manualyClearSpool() {
+        if (this.laneData != null) {
+            const cleanedColor = this.spoolColor.replace('#', '')
+
+            const setColor = `SET_COLOR LANE=${this.laneData.laneName} COLOR=000000`
+            const setWeight = `SET_WEIGHT LANE=${this.laneData.laneName}  WEIGHT=0`
+            const setMaterial = `SET_MATERIAL LANE=${this.laneData.laneName}  MATERIAL=`
+
+            this.$nextTick(async () => {
+                try {
+                    await this.$store.dispatch('printer/sendGcode', setColor)
+                    await this.$store.dispatch('printer/sendGcode', setWeight)
+                    await this.$store.dispatch('printer/sendGcode', setMaterial)
+                } catch (error) {
+                    console.error('Failed to send G-code:', error)
+                }
+            })
+        }
+    }
+
     openSpoolManager() {
         window.open(this.spoolManagerUrl, '_blank')
     }
@@ -163,20 +268,30 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
 
     ejectSpool() {
         if (this.laneData != null) {
-            const gcode = `SET_SPOOL_ID LANE=${this.laneData.laneName} SPOOL_ID=`
-            console.log('Dispatching G-code:', gcode)
+            const setSpoolId = `SET_SPOOL_ID LANE=${this.laneData.laneName} SPOOL_ID=`
+            const unloadLane = `LANE_UNLOAD LANE=${this.laneData.laneName}`
+            console.log('Dispatching G-code:', setSpoolId)
+            console.log('Dispatching G-code:', unloadLane)
 
             this.$nextTick(async () => {
                 try {
-                    await this.$store.dispatch('printer/sendGcode', gcode)
-                    console.log('G-code sent successfully')
+                    await this.$store.dispatch('printer/sendGcode', setSpoolId)
+                    console.log('SET_SPOOL_ID sent successfully')
+
+                    await this.$store.dispatch('printer/sendGcode', unloadLane)
+                    console.log('UNLOAD_LANE sent successfully')
                 } catch (error) {
                     console.error('Failed to send G-code:', error)
                 }
             })
 
-        this.$emit('fetch-spool')
-        this.close()
+            // Spoolman not active manualy clear the spool info
+            if (!this.spoolManagerUrl) {
+                this.manualyClearSpool()
+            }
+
+            this.$emit('fetch-spool')
+            this.close()
         }
     }
 
@@ -227,9 +342,47 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
         this.close()
     }
 
+    initializeFields() {
+        if (this.laneData) {
+            console.log('Initializing with laneData:', this.laneData)
+            this.filamentType = this.laneData.material || ''
+            this.remainingWeight = this.laneData.weight || 0
+            this.spoolColor = this.laneData.color || '#ffffff'
+        }
+    }
+
+    resetFields() {
+        this.filamentType = ''
+        this.remainingWeight = 0
+        this.spoolColor = '#ffffff'
+    }
+
     @Watch('showDialog')
     onShowDialogChanged(newVal: boolean) {
-        if (newVal) this.search = ''
+        if (newVal) {
+            if (this.spoolManagerUrl) {
+                this.search = ''
+            }
+        }
+    }
+
+    @Watch('laneData', { immediate: true })
+    onLaneDataChanged() {
+        if (this.showDialog && this.laneData && !this.spoolManagerUrl) {
+            this.initializeFields()
+        }
     }
 }
 </script>
+<style scoped>
+.color-picker-container {
+    display: flex;
+    flex-direction: column;
+    margin: 10px;
+}
+
+.color-picker-label {
+    font-weight: bold;
+    margin-bottom: 8px;
+}
+</style>
diff --git a/src/components/panels/AfcPanel.vue b/src/components/panels/AfcPanel.vue
index 9bb91229c..fa4bb188c 100644
--- a/src/components/panels/AfcPanel.vue
+++ b/src/components/panels/AfcPanel.vue
@@ -1,169 +1,189 @@
 <template>
-    <div class="afc-panel-wrapper">
-        <panel :icon="mdiAdjust"
-               :title="'Automated Filament Control'"
-               card-class="afc-panel"
-               :collapsible="true"
-               :expanded="true">
+    <div>
+        <panel
+            :icon="mdiAdjust"
+            :title="'Automated Filament Control'"
+            :collapsible="true"
+            :expanded="true"
+            card-class="afc-control-panel">
             <div>
-                <v-expansion-panels>
+                <v-expansion-panels v-model="toolExpandedIndex">
                     <v-expansion-panel>
                         <v-expansion-panel-header>
                             <strong>Extruder Tools</strong>
                         </v-expansion-panel-header>
-                        <v-expansion-panel-content style="padding-top: 0em;">
-                            <div v-for="(tool, toolName) in toolData" style="margin-left: 15px;">
-                                <div style="margin-right: 20px; float: left; margin-top: 0px;">
-                                    <span :class="{
-                                            'status-light': true,
-                                            'status-green': tool.tool_start_sensor,
-                                            'status-red': !tool.tool_start_sensor,
-                                        }">
-                                    </span>
-                                    {{ toolName }}
-                                    <span v-if="tool.tool_end_sensor !== null" :class="{
-                                            'status-light': true,
-                                            'status-green': tool.tool_end_sensor,
-                                            'status-red': !tool.tool_end_sensor,
-                                        }">
-                                    </span>
-                                </div>
-                                <div style="margin-right: 10px; float: left; margin-top: 0px;">
-                                    {{ tool.buffer }}: {{ tool.buffer_status }}
-                                </div>
-                                <div v-if="tool.lane_loaded !== ''" style="margin-right: 10px; float: right; margin-top: 0px;">
-                                    Lane Loaded: {{ tool.lane_loaded }}
-                                </div>
-                                <div v-if="tool.lane_loaded === ''" style="margin-right: 10px; float: right; margin-top: 0px;">
-                                    Lane Loaded:
-                                    <span style="color: red">
-                                        NONE
-                                    </span>
+                        <v-expansion-panel-content style="padding: 0 5px 16px">
+                            <div class="tool-container">
+                                <div
+                                    v-for="(tool, toolName) in toolData"
+                                    :key="toolName"
+                                    class="tool-card rounded-lg shadow-md">
+                                    <div class="extruder-container">
+                                        <v-tooltip top>
+                                            <template #activator="{ on, attrs }">
+                                                <span
+                                                    v-bind="attrs"
+                                                    v-on="on"
+                                                    :class="{
+                                                        'status-light': true,
+                                                        success: tool.tool_start_sensor,
+                                                        error: !tool.tool_start_sensor,
+                                                    }"></span>
+                                            </template>
+                                            <span>Pre-Extruder Sensor</span>
+                                        </v-tooltip>
+                                        {{ toolName }}
+                                        <v-tooltip top>
+                                            <template #activator="{ on, attrs }">
+                                                <span
+                                                    v-if="tool.tool_end_sensor !== null"
+                                                    v-bind="attrs"
+                                                    v-on="on"
+                                                    :class="{
+                                                        'status-light': true,
+                                                        success: tool.tool_end_sensor,
+                                                        error: !tool.tool_end_sensor,
+                                                    }"></span>
+                                            </template>
+                                            <span>Post-Extruder Sensor</span>
+                                        </v-tooltip>
+                                    </div>
+                                    <div class="buffer-info">{{ tool.buffer }}: {{ tool.buffer_status }}</div>
+                                    <div class="lane-status">
+                                        Loaded:
+                                        <span :class="tool.lane_loaded !== '' ? 'primary--text' : 'error--text'">
+                                            {{ tool.lane_loaded !== '' ? tool.lane_loaded : 'NONE' }}
+                                        </span>
+                                    </div>
                                 </div>
                             </div>
                         </v-expansion-panel-content>
                     </v-expansion-panel>
                 </v-expansion-panels>
             </div>
-            <div v-for="(unit, unitName) in unitsData"
-                 :key="unitName"
-                 class="unit-section">
-                <v-expansion-panels>
-                    <v-expansion-panel>
-                        <v-expansion-panel-header>
-                            <div class="unit-header"
-                                 style="display: flex; align-items: center; gap: 10px">
-                                <BoxTurtleIcon v-if="unitsData[unitName]?.system?.type === 'Box_Turtle'"
-                                               style="width: 12%; height: 12%; margin-left: 10px;" />
-                                <h2 class="unit-title" style="margin: 0">
-                                    {{ String(unitName).replace(/_/g, " ") }} |
-                                </h2>
-                                <span style="text-align: left; margin: 15px 0;">
-                                    <span><strong>Hub</strong></span>
-                                    <span :class="{
-                                            'status-light': true,
-                                            'status-green': getHubStatus({unitName : unitName}),
-                                            'status-red': !getHubStatus({unitName : unitName}),
-                                            }">
+            <v-expansion-panels v-model="unitExpandedIndex" multiple>
+                <v-expansion-panel v-for="(unit, unitName) in unitsData" :key="unitName" class="unit-section">
+                    <v-expansion-panel-header>
+                        <div class="unit-header" style="display: flex; align-items: center; gap: 10px">
+                            <BoxTurtleIcon
+                                v-if="unitsData[unitName]?.system?.type === 'Box_Turtle'"
+                                class="box-turtle-icon" />
+                            <h2 class="unit-title" style="margin: 0">{{ String(unitName).replace(/_/g, ' ') }} |</h2>
+                            <span class="hub-container">
+                                <strong>Hub</strong>
+                                <span
+                                    :class="{
+                                        'status-light': true,
+                                        success: getHubStatus({ unitName }),
+                                        error: !getHubStatus({ unitName }),
+                                    }"></span>
+                            </span>
+                        </div>
+                    </v-expansion-panel-header>
+                    <v-expansion-panel-content>
+                        <div class="spool-container">
+                            <div
+                                v-for="(spool, index) in unit.spools"
+                                :key="index"
+                                class="spool-card rounded-lg shadow-md overflow-hidden">
+                                <div class="spool-card-header">
+                                    <span
+                                        :class="
+                                            spool.load && spool.prep && spool.tool_loaded
+                                                ? 'primary--text'
+                                                : spool.load && spool.prep
+                                                  ? 'success--text'
+                                                  : spool.prep
+                                                    ? 'warning--text'
+                                                    : 'error--text'
+                                        ">
+                                        <h3>{{ spool.laneName }}</h3>
                                     </span>
-                                </span>
-                            </div>
-                        </v-expansion-panel-header>
-                        <v-expansion-panel-content style="padding-top: 0em;">
-                            <div class="spool-container">
-                                <div v-for="(spool, index) in unit.spools"
-                                     style="margin-top: 0px;"
-                                     :key="index"
-                                     class="spool-card">
-                                    <div class="filament-reel"
-                                         style="padding: 5px; width: 50%;"
-                                         :key="index"
-                                         @click="openChangeSpoolDialog(spool)">
-                                        <FilamentReelIcon v-if="spool.prep"
-                                                          :color="spool.color"
-                                                          style="float: left"/>
-                                        <FilamentReelIcon v-else
-                                                          :color="'transparent'"
-                                                          style="float: left"/>
-                                    </div>
-                                    <div class="spool-header">
-                                        <span style="color:red" v-if="!spool.load && !spool.prep && !spool.tool_loaded">
-                                            <h3>{{ spool.laneName }}</h3>
-                                        </span>
-                                        <span style="color:yellow" v-if="!spool.load && spool.prep && !spool.tool_loaded">
-                                            <h3>{{ spool.laneName }}</h3>
-                                        </span>
-                                        <span style="color:green" v-if="spool.load && spool.prep && !spool.tool_loaded">
-                                            <h3>{{ spool.laneName }}</h3>
-                                        </span>
-                                        <span style="color:blue" v-if="spool.load && spool.prep && spool.tool_loaded">
-                                            <h3>{{ spool.laneName }}</h3>
-                                        </span>
-                                        <div class="spacer"></div>
-                                        <select :name="'map-' +spool.laneName"
+                                    <div class="spacer"></div>
+                                    <v-tooltip top>
+                                        <template #activator="{ on, attrs }">
+                                            <select
+                                                v-bind="attrs"
+                                                v-on="on"
+                                                :name="'map-' + spool.laneName"
                                                 class="afclist"
                                                 @change="handleMapChange($event, spool)">
-                                            <option v-for="option in mapList"
+                                                <option
+                                                    v-for="option in mapList"
+                                                    :key="option"
                                                     :value="option"
                                                     :selected="option === spool.map">
-                                                {{ option }}
-                                            </option>
-                                        </select>
+                                                    {{ option }}
+                                                </option>
+                                            </select>
+                                        </template>
+                                        <span>Remap current lane to selected T command</span>
+                                    </v-tooltip>
+                                </div>
+                                <div class="spool-card-body">
+                                    <div class="filament-reel" @click="openChangeSpoolDialog(spool)">
+                                        <FilamentReelIcon :color="spool.prep ? spool.color : 'transparent'" />
+                                    </div>
+                                    <div class="spool-card-info">
+                                        <div class="infinite-spool">
+                                            <v-tooltip top>
+                                                <template #activator="{ on, attrs }">
+                                                    <select
+                                                        v-bind="attrs"
+                                                        v-on="on"
+                                                        :name="'run-' + spool.laneName"
+                                                        class="afclist"
+                                                        @change="handleRunoutChange($event, spool)">
+                                                        <option
+                                                            v-for="option in laneList"
+                                                            :key="option"
+                                                            :value="option"
+                                                            :selected="option === spool.runout_lane"
+                                                            v-if="option !== spool.laneName">
+                                                            {{ option }}
+                                                        </option>
+                                                    </select>
+                                                </template>
+                                                <span>Next lane to load if the current lane runs out</span>
+                                            </v-tooltip>
+                                            <infinity-icon
+                                                :color="spool.runout_lane === 'NONE' ? 'red' : 'green'"
+                                                class="infinity-icon"
+                                                version="1.1"
+                                                id="Capa_1"
+                                                viewBox="0 0 60 60"
+                                                xml:space="preserve" />
+                                        </div>
+                                        <p v-if="spool.material">{{ spool.material }}</p>
+                                        <p v-if="spool.weight">{{ spoolWeight(spool) }}</p>
                                     </div>
-                                    <infinity-icon v-if="spool.runout_lane === 'NONE'"
-                                                   :color="infispoolNo"
-                                                   height="20px"
-                                                   width="20px"
-                                                   version="1.1"
-                                                   id="Capa_1"
-                                                   style="float: right; margin-top: 2px; margin-left: 5px;"
-                                                   viewBox="0 0 60 60" xml:space="preserve" />
-                                    <infinity-icon v-else
-                                                   height="20px"
-                                                   :color="infispoolYes"
-                                                   width="20px"
-                                                   version="1.1"
-                                                   id="Capa_1"
-                                                   style="float: right; margin-top: 2px; margin-left: 5px;"
-                                                   viewBox="0 0 60 60" xml:space="preserve" />
-
-                                    <select :name="'run-' +spool.laneName"
-                                            class="afclist"
-                                            @change="handleRunoutChange($event, spool)">
-                                        <option v-for="option in laneList"
-                                                :value="option"
-                                                :selected="option === spool.runout_lane">
-                                            {{ option }}
-                                        </option>
-                                    </select>
-                                    <p v-if="spool.material">{{ spool.material }}</p>
-                                    <p v-if="spool.weight">{{ spoolWeight(spool) }}</p>
                                 </div>
                             </div>
-                        </v-expansion-panel-content>
-                    </v-expansion-panel>
-                </v-expansion-panels>
-            </div>
-
+                        </div>
+                    </v-expansion-panel-content>
+                </v-expansion-panel>
+            </v-expansion-panels>
         </panel>
-        <afc-change-spool-dialog :show-dialog="showChangeSpoolDialog"
-                                 :index="index"
-                                 :lane-data="selectedLane"
-                                 @close="showChangeSpoolDialog = false"
-                                 @fetch-spool="fetchSpoolData" />
+        <afc-change-spool-dialog
+            v-if="selectedLane"
+            :show-dialog="showChangeSpoolDialog"
+            :index="index"
+            :lane-data="selectedLane"
+            @close="showChangeSpoolDialog = false"
+            @fetch-spool="fetchSpoolData" />
     </div>
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from "vue-property-decorator"
-import BaseMixin from "@/components/mixins/base"
-import Panel from "@/components/ui/Panel.vue"
-import { mdiAdjust, mdiRefresh, mdiDotsVertical } from "@mdi/js"
-import AfcChangeSpoolDialog from "@/components/dialogs/AfcChangeSpoolDialog.vue"
-import FilamentReelIcon from '@/components/ui/FilamentReelIcon.vue'
-import SpoolIcon from "@/components/ui/SpoolIcon.vue"
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiAdjust, mdiRefresh, mdiDotsVertical } from '@mdi/js'
+import AfcChangeSpoolDialog from '@/components/dialogs/AfcChangeSpoolDialog.vue'
+import FilamentReelIcon from '@/components/ui/FilamentReelIcon.vue'
+import SpoolIcon from '@/components/ui/SpoolIcon.vue'
 import { AFCRoot } from '@/store/server/afc'
-import BoxTurtleIcon from "@/components/ui/BoxTurtleIcon.vue"
+import BoxTurtleIcon from '@/components/ui/BoxTurtleIcon.vue'
 import InfinityIcon from '@/components/ui/InfinityIcon.vue'
 
 @Component({
@@ -171,44 +191,47 @@ import InfinityIcon from '@/components/ui/InfinityIcon.vue'
         Panel,
         AfcChangeSpoolDialog,
         SpoolIcon,
-        FilamentReelIcon,
+        FilamentReelIcon,
         BoxTurtleIcon,
-        InfinityIcon
+        InfinityIcon,
     },
 })
-
 export default class AfcPanel extends Mixins(BaseMixin) {
-    mdiAdjust = mdiAdjust;
-    mdiRefresh = mdiRefresh;
-    mdiDotsVertical = mdiDotsVertical;
-
-    showChangeSpoolDialog = false;
-    selectedLane: any = null; // This will hold data of the clicked lane
-
-    spoolData: any[] = [];
-    intervalId: number | null = null;
-    systemData: any = null;
-    index: number = 0;
-    unitsData: any = {};
-
-    selectedStyle: number = 1;
-    styleIndex: number = 1;
-
-    infispoolYes: any='#00FF00';
-    infispoolNo: any='#FF0000';
+    mdiAdjust = mdiAdjust
+    mdiRefresh = mdiRefresh
+    mdiDotsVertical = mdiDotsVertical
+
+    showChangeSpoolDialog = false
+    selectedLane: any = null // This will hold data of the clicked lane
+
+    spoolData: any[] = []
+    toolData: any[] = []
+    mapList: any[] = []
+    laneList: any[] = []
+    intervalId: ReturnType<typeof setInterval> | null = null
+    systemData: any = null
+    index: number = 0
+    unitsData: any = {}
+    toolExpandedIndex: number | null = null
+    unitExpandedIndex: number[] = []
+    autoExpand: boolean = false
+
+    selectedStyle: number = 1
+    styleIndex: number = 1
 
     async mounted() {
-        const savedStyleIndex = localStorage.getItem('styleIndex');
+        const savedStyleIndex = localStorage.getItem('styleIndex')
         if (savedStyleIndex !== null) {
-            this.styleIndex = parseInt(savedStyleIndex, 10);
+            this.styleIndex = parseInt(savedStyleIndex, 10)
         }
-        this.fetchSpoolData();
-        this.intervalId = setInterval(this.fetchSpoolData, 5);
+        this.fetchSpoolData()
+        this.intervalId = setInterval(this.fetchSpoolData, 500)
     }
 
     beforeDestroy() {
-        if (this.intervalId) {
-            clearInterval(this.intervalId);
+        if (this.intervalId !== null) {
+            clearInterval(this.intervalId)
+            this.intervalId = null
         }
     }
 
@@ -217,106 +240,117 @@ export default class AfcPanel extends Mixins(BaseMixin) {
     }
 
     fetchSpoolData() {
-        const afcData = this.afc_Data ? JSON.parse(JSON.stringify(this.afc_Data)) : null;
+        const afcData = this.afc_Data ? JSON.parse(JSON.stringify(this.afc_Data)) : null
         if (afcData) {
-            this.unitsData = this.groupByUnit(this.spoolData);
-            this.spoolData = this.extractLaneData(afcData);
-            this.toolData = afcData.system.extruders || {};
-            this.systemData = afcData.system || {};
+            this.unitsData = this.groupByUnit(this.spoolData)
+            this.spoolData = this.extractLaneData(afcData)
+            this.toolData = afcData.system.extruders || {}
+            this.systemData = afcData.system || {}
             for (const unitName in afcData) {
-                if (afcData.hasOwnProperty(unitName) && unitName !== "system") {
+                if (afcData.hasOwnProperty(unitName) && unitName !== 'system') {
                     if (this.unitsData[unitName]) {
-                        this.unitsData[unitName].system = afcData[unitName].system || {};
+                        this.unitsData[unitName].system = afcData[unitName].system || {}
                     }
                 }
             }
+
+            if (Object.keys(this.toolData).length === 1 && this.toolExpandedIndex === null) {
+                this.toolExpandedIndex = 0
+            }
+            if (Object.keys(this.unitsData).length === 1 && !this.autoExpand) {
+                this.unitExpandedIndex = [0]
+                this.autoExpand = true
+            }
         } else {
-            this.spoolData = [];
-            this.unitsData = {};
-            this.systemData = {};
+            this.spoolData = []
+            this.unitsData = {}
+            this.systemData = {}
         }
     }
 
     extractLaneData(spools: any) {
-        const lanes = [];
-        const mapList = [];
-        const laneList = [];
-        this.mapList = [];
-        this.laneList = [];
-        if (spools && typeof spools === "object") {
+        const lanes = []
+        const mapList = []
+        const laneList = []
+        this.mapList = []
+        this.laneList = []
+        if (spools && typeof spools === 'object') {
             for (const unitName in spools) {
-                if (spools.hasOwnProperty(unitName) && unitName !== "system") {
-                    const unit = spools[unitName];
+                if (spools.hasOwnProperty(unitName) && unitName !== 'system') {
+                    const unit = spools[unitName]
                     for (const laneKey in unit) {
                         if (
                             unit.hasOwnProperty(laneKey) &&
-                            typeof unit[laneKey] === "object" &&
-                            laneKey !== "system"
+                            typeof unit[laneKey] === 'object' &&
+                            laneKey !== 'system' &&
+                            unit[laneKey] !== null
                         ) {
-                            const laneData = unit[laneKey];
-                            laneData.unitName = unitName;
-                            laneData.laneName = laneKey;
+                            const laneData = unit[laneKey]
+                            laneData.unitName = unitName
+                            laneData.laneName = laneKey
                             laneData.empty = '#2e2e2e'
-                            lanes.push(laneData);
-                            laneList.push(laneKey);
-                            mapList.push(unit[laneKey]['map']);
+                            laneData.material = laneData.material || ''
+                            laneData.color = laneData.color || '#000000'
+                            laneData.weight = laneData.weight || 0
+                            lanes.push(laneData)
+                            laneList.push(laneKey)
+                            mapList.push(unit[laneKey]['map'])
                         }
                     }
                 }
             }
         }
-        this.laneList=laneList.sort();
-        this.laneList.unshift('NONE');
-        this.mapList = mapList.sort();
-        return lanes;
+        this.laneList = laneList.sort()
+        this.laneList.unshift('NONE')
+        this.mapList = mapList.sort()
+        return lanes
     }
 
-
-    saveStyleIndex(changer: number){
-        this.styleIndex = changer;
-        localStorage.setItem('styleIndex', changer.toString());
+    saveStyleIndex(changer: number) {
+        this.styleIndex = changer
+        localStorage.setItem('styleIndex', changer.toString())
     }
 
     private groupByUnit(spoolData: any[]) {
-        const units: any = {};
+        const units: any = {}
         spoolData.forEach((spool) => {
-            const unitName = spool.unitName;
+            const unitName = spool.unitName
             if (!units[unitName]) {
-                units[unitName] = { spools: [] };
+                units[unitName] = { spools: [] }
             }
-            units[unitName].spools.push(spool);
-        });
-        return units;
+            units[unitName].spools.push(spool)
+        })
+        return units
     }
 
     openChangeSpoolDialog(spool: any) {
-        this.selectedLane = { spool, laneName: spool.laneName };
-        this.showChangeSpoolDialog = true;
+        this.selectedLane = spool
+        this.showChangeSpoolDialog = true
     }
 
     bufferStatus() {
-        return this.systemData?.extruders?.extruder?.buffer_status || false;
+        return this.systemData?.extruders?.extruder?.buffer_status || false
     }
 
     getHubStatus({ unitName }: { unitName: any }) {
         if (this.unitsData[unitName]?.system?.hub_loaded !== undefined) {
-            return this.unitsData[unitName].system.hub_loaded;
+            return this.unitsData[unitName].system.hub_loaded
         }
-        return this.systemData?.hub_loaded || false;
+        return this.systemData?.hub_loaded || false
     }
 
     get toolStartSensorStatus() {
-        return this.systemData?.extruders?.extruder?.tool_start_sensor || false;
+        return this.systemData?.extruders?.extruder?.tool_start_sensor || false
     }
 
     spoolWeight(spool: any) {
-        const weight = parseInt(spool.weight, 10);
-        return weight ? `${weight} g` : "";
+        const weight = parseInt(spool.weight, 10)
+        return weight ? `${weight} g` : ''
     }
 
     handleRunoutChange(event: Event, spool: any) {
-        const selectedValue = (event.target as HTMLSelectElement).value;
-        console.log(`Selected value for ${spool.laneName}: ${selectedValue}`);
+        const selectedValue = (event.target as HTMLSelectElement).value
+        console.log(`Selected value for ${spool.laneName}: ${selectedValue}`)
 
         const gcode = `SET_RUNOUT LANE=${spool.laneName} RUNOUT=${selectedValue}`
         console.log('Dispatching G-code:', gcode)
@@ -332,8 +366,8 @@ export default class AfcPanel extends Mixins(BaseMixin) {
     }
 
     handleMapChange(event: Event, spool: any) {
-        const selectedValue = (event.target as HTMLSelectElement).value;
-        console.log(`Selected value for ${spool.laneName}: ${selectedValue}`);
+        const selectedValue = (event.target as HTMLSelectElement).value
+        console.log(`Selected value for ${spool.laneName}: ${selectedValue}`)
 
         //Example G-Code Call for you
         const gcode = `SET_MAP LANE=${spool.laneName} MAP=${selectedValue}`
@@ -348,106 +382,151 @@ export default class AfcPanel extends Mixins(BaseMixin) {
             }
         })
     }
-    private determineStatus(spool: any) {
-        if (spool.prep) {
-            if (spool.load) {
-                if (this.systemData && this.systemData.current_load === spool.laneName) {
-                    if (spool.spool_id == this.$store.state.server.spoolman.active_spool?.id) {
-                        spool.weight = this.$store.state.server.spoolman.active_spool?.remaining_weight;
-                    }
-                    return "In Tool";
-                }
-                return "Ready";
-            }
-            return "Prep";
-        }
-        return "Not Ready";
-    }
 }
-
 </script>
 
 <style scoped>
-    .afc-panel-wrapper {
-        margin-bottom: 24px;
-    }
+.spool-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    padding-top: 0px;
+}
 
-    .spool-container {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-evenly;
-        gap: 8px;
-        padding: 8px;
-        padding-top: 0px;
-        margin-top: 0px;
-    }
+.tool-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px;
+    padding-top: 0px;
+    margin-top: 0px;
+}
 
-    .unit-title {
-        font-size: 1.5em;
-        margin-bottom: 16px;
-        text-align: left;
-    }
+.hub-container {
+    text-align: left;
+    margin: 20px 0;
+}
 
-    .spool-card {
-        background-color: #2e2e2e;
-        border-radius: 8px;
-        padding: 8px;
-        padding-top: 0px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        flex: 1 1 calc(23% - 16px);
-        max-width: 180px;
-        min-width: 120px;
-        min-height: 117px;
-        position: relative;
-        transition: box-shadow 0.3s;
-        margin-bottom: 0px;
-        text-align: right;
-    }
+.hub-container strong {
+    margin-right: 5px;
+}
 
-    .filament-reel {
-        position: absolute;
-        bottom: 10px;
-        cursor: pointer;
-    }
+.unit-title {
+    font-size: 1.5em;
+    margin-bottom: 16px;
+    text-align: left;
+}
 
-    .spool-card p {
-        margin: 4px 0;
-    }
+.spool-card {
+    transition: background-color 0.3s ease;
+    padding-top: 0px;
+    max-width: 150px;
+    min-width: 110px;
+    min-height: 150px;
+    flex: 1 1 110px;
+    position: relative;
+    text-align: right;
+    width: 100%;
+}
 
-    .spool-header {
-        display: flex;
-        justify-content: space-evenly;
-        gap: 5px;
-    }
+.spool-card-header {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-bottom: 5px;
+}
 
-    .afclist {
-        background-color: #2e2e2e;
-        color: white;
-        text-align: right;
-        cursor: pointer;
-    }
+.spool-card-body {
+    padding: 5px;
+    padding-top: 0px;
+    display: flex;
+    justify-content: space-between;
+}
 
-    .status-wrapper {
-        justify-content: space-evenly;
-        border-bottom: 1px solid #ccc;
-        padding-bottom: 10px;
-        margin-bottom: 15px;
-    }
+.spool-card-body p {
+    margin: 4px 0;
+}
 
-    .status-light {
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        display: inline-block;
-        margin-right: 5px;
-        margin-left: 5px;
-    }
+.tool-card {
+    transition: background-color 0.3s ease;
+    padding: 5px;
+    padding-left: 10px;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    align-content: center;
+    justify-content: space-between;
+}
 
-    .status-green {
-        background-color: rgb(24, 177, 24);
-    }
+.theme--dark .spool-card,
+.theme--dark .tool-card {
+    background-color: #2e2e2e;
+}
 
-    .status-red {
-        background-color: red;
-    }
-</style>
+.theme--light .spool-card,
+.theme--light .tool-card {
+    background-color: #ebebeb;
+}
+
+.filament-reel {
+    bottom: 5px;
+    min-width: 30px;
+    max-width: 40px;
+    width: 100%;
+    flex: 1 1 auto;
+    cursor: pointer;
+}
+
+.infinite-spool {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+}
+.spacer {
+    flex-grow: 1;
+}
+
+.afclist {
+    cursor: pointer;
+    padding-left: 6px;
+    padding-right: 1px;
+    float: left;
+}
+.theme--dark .spool-card .afclist {
+    color: white;
+    background-color: #2e2e2e;
+}
+
+.theme--light .spool-card .afclist {
+    background-color: #ebebeb;
+}
+
+.infinity-icon {
+    float: right;
+    width: 20px;
+    height: 20px;
+}
+
+.status-light {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 5px;
+    margin-left: 5px;
+}
+
+.box-turtle-icon {
+    width: 70px;
+    height: 70px;
+    margin-left: 10px;
+}
+
+.lane-status {
+    margin-right: 10px;
+    margin-left: 5px;
+}
+</style>
diff --git a/src/components/ui/FilamentReelIcon.vue b/src/components/ui/FilamentReelIcon.vue
index 0496d7035..776617041 100644
--- a/src/components/ui/FilamentReelIcon.vue
+++ b/src/components/ui/FilamentReelIcon.vue
@@ -1,85 +1,91 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg"
-         x="0px"
-         y="0px"
-         viewBox="0 0 499.8 499.8"
-         xml:space="preserve"
-         @click="clickSpool">
-    <desc>Converted from Adobe Illustrator SVG</desc>
-  
-    <path id="spool_right_rim"
-          d="M202.1,0.3h-5v2.3C179,19,165,123.6,165,250s14,231.1,32.2,247.5v2.3h5
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        x="0px"
+        y="0px"
+        viewBox="0 0 256 499.8"
+        xml:space="preserve"
+        @click="clickSpool">
+        <desc>Converted from Adobe Illustrator SVG</desc>
+
+        <path
+            id="spool_right_rim"
+            d="M202.1,0.3h-5v2.3C179,19,165,123.6,165,250s14,231.1,32.2,247.5v2.3h5
           c20.5,0,37.2-111.9,37.2-249.8S222.7,0.3,202.1,0.3z"
-          :style="spoolRim" />
-  
-    <path id="spool_right"
-          d="M197.1,0.3c20.5,0,37.2,111.9,37.2,249.8s-16.7,249.8-37.2,249.8S160,387.9,160,250
+            :style="spoolRim" />
+
+        <path
+            id="spool_right"
+            d="M197.1,0.3c20.5,0,37.2,111.9,37.2,249.8s-16.7,249.8-37.2,249.8S160,387.9,160,250
           S176.6,0.3,197.1,0.3z"
-          :style="spoolColor" />
-  
-    <path id="spool_tube"
-          d="M194.6,166.9L194.6,166.9L49.1,167l0,0c6.9,0,12.4,37.2,12.4,83.2c0,44.1-5.1,80.3-11.6,83
+            :style="spoolColor" />
+
+        <path
+            id="spool_tube"
+            d="M194.6,166.9L194.6,166.9L49.1,167l0,0c6.9,0,12.4,37.2,12.4,83.2c0,44.1-5.1,80.3-11.6,83
           l144.7,0l0,0c6.9,0,12.4-37.2,12.4-83.2C207,204.2,201.4,166.9,194.6,166.9z"
-          :style="spoolTube" />
-  
-    <path id="filament_base"
-          d="M35,31c18.8-12.1,138-10.4,162.1,0c24.9,10.4,41.1,398.9,0,438.1
+            :style="spoolTube" />
+
+        <path
+            id="filament_base"
+            d="M35,31c18.8-12.1,138-10.4,162.1,0c24.9,10.4,41.1,398.9,0,438.1
           c-37.2,12.2-147.7,11.4-162.1,0C22,458.8,16.2,43,35,31z"
-          :style="colorReel" />
-  
-    <path id="spool_left_rim"
-          d="M42.5,0.3h-5v2.3C19.3,19,5.3,123.6,5.3,250s14,231.1,32.2,247.5v2.3h5
+            :style="colorReel" />
+
+        <path
+            id="spool_left_rim"
+            d="M42.5,0.3h-5v2.3C19.3,19,5.3,123.6,5.3,250s14,231.1,32.2,247.5v2.3h5
           c20.5,0,37.2-111.9,37.2-249.8S63,0.3,42.5,0.3z"
-          :style="spoolRim" />
-  
-    <path id="spool_left"
-          d="M37.5,0.3C58,0.3,74.6,112.2,74.6,250S58,499.8,37.5,499.8S0.3,387.9,0.3,250
+            :style="spoolRim" />
+
+        <path
+            id="spool_left"
+            d="M37.5,0.3C58,0.3,74.6,112.2,74.6,250S58,499.8,37.5,499.8S0.3,387.9,0.3,250
           S16.9,0.3,37.5,0.3z"
-          :style="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.4S23.9,293.3,23.9,250
+            :style="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.4S23.9,293.3,23.9,250
           S29,171.6,35.5,171.6z"
-          :style="spoolHole" />
+            :style="spoolHole" />
     </svg>
 </template>
 
-
 <script lang="ts">
-    import Component from 'vue-class-component'
-    import { Mixins, Prop } from 'vue-property-decorator'
-    import BaseMixin from '@/components/mixins/base'
-
-    @Component({})
-    export default class FilamentReelIcon extends Mixins(BaseMixin) {
-        @Prop({ required: false, default: '#ff0' })
-        declare readonly color: string
-
-        get colorReel() {
-            return { fill: this.color }
-        }
-
-        get spoolColor() {
-            return { fill: "#c08f4f" }
-        }
-
-        get spoolHole() {
-            return { fill: "#231a0f" }
-        }
-
-        get spoolTube() {
-            return { fill: "#594226" }
-        }
-
-        get spoolRim() {
-            return { fill: "#9b7242" }
-        }
-
-        clickSpool() {
-            this.$emit('click-spool')
-        }
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component({})
+export default class FilamentReelIcon extends Mixins(BaseMixin) {
+    @Prop({ required: false, default: '#ff0' })
+    declare readonly color: string
+
+    get colorReel() {
+        return { fill: this.color }
+    }
+
+    get spoolColor() {
+        return { fill: '#c08f4f' }
+    }
+
+    get spoolHole() {
+        return { fill: '#231a0f' }
+    }
+
+    get spoolTube() {
+        return { fill: '#594226' }
+    }
+
+    get spoolRim() {
+        return { fill: '#9b7242' }
+    }
+
+    clickSpool() {
+        this.$emit('click-spool')
     }
+}
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/locales/en.json b/src/locales/en.json
index c897531ac..58a29d813 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -608,6 +608,12 @@
         "Headline": "Manual Probe"
     },
     "Panels": {
+        "AfcSpoolmanPanel": {
+            "FilamentType": "Filament Type",
+            "RemainingWeight": "Remaining Weight",
+            "SpoolColor": "Filament Color",
+            "UpdateSpool": "Update Spool"
+        },
         "ExtruderControlPanel": {
             "Allowed": "Allowed",
             "CleanNozzle": "Clean Nozzle",