diff --git a/snippets/shx-3d-render-input.liquid b/snippets/shx-3d-render-input.liquid
index 85dcc39..e4e5827 100644
--- a/snippets/shx-3d-render-input.liquid
+++ b/snippets/shx-3d-render-input.liquid
@@ -115,7 +115,7 @@
 
 <script type="text/javascript"> 
 
-    let FilamentList = {
+    const FilamentList = {
         "10": {
             "name": "Schwarz (Matt)",
             "hex": "#000000",
@@ -193,29 +193,12 @@
         }
     }
 
+    
+
     // sort FilamentList by hex
-    function SHX_sortFilamentList() {
-        let sortable = [];
-        for (let filament in FilamentList) {
-            sortable.push([filament, FilamentList[filament]]);
-        }
-
-        sortable.sort(function(a, b) {
-            return a[1].hex.localeCompare(b[1].hex);
-        });
-
-        let sortedList = {};
-        for(let i = 0; i < sortable.length; i++) {
-            sortedList[sortable[i][0]] = sortable[i][1];
-        }
-
-        return sortedList;
-    }
-
-    console.log("FilamentList", FilamentList);
-
-    FilamentList = SHX_sortFilamentList();
-    console.log("FilamentList2", FilamentList);
+    const sortedFilementIDs = Object.keys(FilamentList).sort((a, b) => {
+        return FilamentList[a].hex.localeCompare(FilamentList[b].hex);
+    });
 
     function SHX_getFilamentById(id) {
         let filament = FilamentList[id];
@@ -275,7 +258,7 @@
 
     function  SHX_IFC_genColorSelect(inputID, labelText, inputName, _inputVal, colorWhiteList, section_id) {
 
-        let options = {};
+        let options = [];
 
         let inputVal = _inputVal;
 
@@ -284,10 +267,10 @@
         }
 
         if(!colorWhiteList || colorWhiteList.length === 0) {
-            options = {...FilamentList};
+            options = [...sortedFilementIDs];
         } else for(let i = 0; i < colorWhiteList.length; i++) {
             if(FilamentList[colorWhiteList[i]]) {
-                options[colorWhiteList[i]] = FilamentList[colorWhiteList[i]];
+                options.push(colorWhiteList[i]);
             } else {
                 console.error("Color not found in FilamentList", colorWhiteList[i]);
             }
@@ -297,18 +280,12 @@
         let html = `
             <label class="form__label custom shx-ifc-form_label" for="${inputID}-label">${labelText}: <span class="shx-ifc-form_label_selected shx-ifc-form_label_selected_${inputID}">${SHX_getFilamentById(inputVal).name}</span></label>
                 <div id="${inputID}" class="shx-ifc-colorselect">
-        `;
-
-        // Convert object to Map
-        let optionsKeys = Object.keys(options);
-        console.log("FilamentList", FilamentList);
-        console.log("options", options);
-        console.log("optionsKeys", optionsKeys );
+        `; 
 
 
         // Iterate over the Map
-        for (let i = 0; i < optionsKeys.length; i++) {
-            let color = optionsKeys[i];
+        for (let i = 0; i < options.length; i++) {
+            let color = options[i];
 
             console.log(color);
             html += `