diff --git a/index.html b/index.html
index 127c838..980e953 100644
--- a/index.html
+++ b/index.html
@@ -529,7 +529,7 @@
     <div id="steps-modal" class="modal">
         <div class="modal-content">
             <div class="modal-header">
-                Assembly Instructions
+                Synthesis Instructions
                 <button class="close-btn" onclick="closeSteps()">&times;</button>
             </div>
             <div class="modal-body" id="steps-list">
@@ -849,7 +849,8 @@
                     id: id,
                     recipe: recipe,
                     batches: batches,
-                    amountProduced: batches * yieldAmt
+                    amountProduced: batches * yieldAmt,
+                    depth: depth
                 });
 
                 // 5. Produce Byproducts
@@ -939,6 +940,12 @@
                     }
                 });
 
+                // Sort by depth
+                merged.sort((a, b) => a.depth - b.depth);
+
+                // Reverse to get topological order (Dependencies first)
+                merged.reverse();
+
                 return merged;
             }
         }
@@ -1113,7 +1120,7 @@
                     const rIdx = selectedRecipes[node.id] !== undefined ? selectedRecipes[node.id] : 0;
                     const hasRecipe = recipeList.length > 0 && rIdx !== -1 && node.type !== 'surplus';
                     const currentRecipe = hasRecipe ? recipeList[rIdx] : null;
-
+                    console.log(node.id, recipeList, rIdx, hasRecipe, currentRecipe);
                     let content = '';
                     if (node.type === 'surplus') {
                         content = `<div style="color: var(--accent-orange); font-size: 0.8rem;">[ FROM BYPRODUCTS ]</div>`;
@@ -1133,8 +1140,18 @@
                                 </div>
                             `).join('')}
                         </div>`;
-                    } else {
+                    } else if (recipeList.length == 0) {
                         content = `<div style="color: var(--accent-cyan); font-size: 0.8rem; font-weight: bold;">[ RAW MATERIAL ]</div>`;
+                    } else {
+                        content = `
+                        <select class="recipe-select" onchange="changeRecipe('${node.id}', this.value)">
+                            <option value="-1" ${rIdx == -1 ? 'selected' : ''}>[ Already Have ]</option>
+                            ${recipeList.map((r, i) => {
+                            if (document.getElementById('hide-grind').checked && isGrindRecipe(r) && rIdx !== i) return '';
+                            return `<option value="${i}" ${rIdx == i ? 'selected' : ''}>${r.id}</option>`;
+                        }).join('')}
+                        </select>
+                        <div style="color: var(--accent-cyan); font-size: 0.8rem; font-weight: bold;">[ TREATED AS RAW MATERIAL ]</div>`;
                     }
 
                     div.innerHTML = `