diff --git a/dist/index.html b/dist/index.html
index 7d69d34..b12f997 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -30,7 +30,7 @@
             </div>
         </div>
 
-        <div class="dimming" id="node-creation-container">
+        <div class="dimming hidden" id="node-creation-container">
             <div id="node-creation-modal">
                 <div class="title-row">
                     <h2 class="title">Select a recipe for the new node</h2>
diff --git a/dist/style.css b/dist/style.css
index 6e0bcfb..aee3f5f 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -255,7 +255,7 @@ div#node-creation-modal {
     flex-grow: 1;
     gap: 12px;
     border-radius: 0 8px 8px 8px;
-    flex-wrap: wrap;
+    flex-direction: column;
     align-content: flex-start;
 }
 
@@ -263,6 +263,19 @@ div#node-creation-modal {
     display: flex;
 }
 
+#node-creation-modal .recipes-tab h3.group-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 400;
+    color: #e8e8e8;
+}
+
+#node-creation-modal .recipes-tab div.group {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+}
+
 #node-creation-modal div.recipe {
     height: 64px;
     width: 64px;
diff --git a/src/main.ts b/src/main.ts
index 5fe4736..7266c1e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -37,6 +37,9 @@ async function main()
 
     function createNode() 
     {
+        let nodeCreationContainer = document.querySelector("div#node-creation-container");
+        nodeCreationContainer?.classList.remove("hidden");
+
         const node = new SankeyNode(nodesGroup, new Point(50, 50), [50, 50], [100]);
 
         node.nodeSvg.onmousedown = (event) =>
@@ -141,29 +144,78 @@ async function main()
         let recipesTab = document.createElement("div");
         recipesTab.classList.add("recipes-tab");
 
-        for (let recipe of machine.recipes)
+        let createRecipesGroup = (name: string): { div: HTMLDivElement, title: HTMLHeadingElement; } =>
         {
-            let recipeNode = document.createElement("div");
-            recipeNode.classList.add("recipe");
+            let groupTitle = document.createElement("h3");
+            groupTitle.classList.add("group-title");
+            groupTitle.innerText = name;
+
+            let groupDiv = document.createElement("div");
+            groupDiv.classList.add("group");
+
+            return { div: groupDiv, title: groupTitle };
+        };
 
-            let itemIcon = document.createElement("img");
-            itemIcon.classList.add("item-icon");
+        let basicRecipesGroup = createRecipesGroup("Basic recipes");
+        let alternateRecipesGroup = createRecipesGroup("Alternate recipes");
+        let eventsRecipesGroup = createRecipesGroup("Events recipes");
 
-            if (recipe.products.length === 1)
+        let createRecipeParser = (simpleRecipesGroup: HTMLDivElement) =>
+        {
+            return (recipe: typeof machine.recipes[0]): void =>
             {
-                let resource = satisfactoryData.resources.find(resource => resource.id == recipe.products[0].id);
+                let recipeNode = document.createElement("div");
+                recipeNode.classList.add("recipe");
+
+                let itemIcon = document.createElement("img");
+                itemIcon.classList.add("item-icon");
 
-                if (resource != undefined)
+                let isEventRecipe = false;
+
+                if (recipe.products.length === 1)
                 {
-                    itemIcon.src = `GameData/SatisfactoryIcons/${resource.iconPath}`;
+                    let resource = satisfactoryData.resources.find(resource => resource.id == recipe.products[0].id);
+
+                    if (resource != undefined)
+                    {
+                        itemIcon.src = `GameData/SatisfactoryIcons/${resource.iconPath}`;
+                        isEventRecipe = resource.iconPath.startsWith("Events");
+                    }
                 }
-            }
 
-            itemIcon.alt = recipe.displayName;
-            itemIcon.loading = "lazy";
+                itemIcon.alt = recipe.displayName;
+                itemIcon.loading = "lazy";
+
+                recipeNode.appendChild(itemIcon);
+
+                if (isEventRecipe)
+                {
+                    eventsRecipesGroup.div.appendChild(recipeNode);
+                }
+                else
+                {
+                    simpleRecipesGroup.appendChild(recipeNode);
+                }
+            };
+        };
+
+        machine.recipes.forEach(createRecipeParser(basicRecipesGroup.div));
+        machine.alternateRecipes.forEach(createRecipeParser(alternateRecipesGroup.div));
 
-            recipeNode.appendChild(itemIcon);
-            recipesTab.appendChild(recipeNode);
+        if (basicRecipesGroup.div.childElementCount !== 0)
+        {
+            recipesTab.appendChild(basicRecipesGroup.title);
+            recipesTab.appendChild(basicRecipesGroup.div);
+        }
+        if (alternateRecipesGroup.div.childElementCount !== 0)
+        {
+            recipesTab.appendChild(alternateRecipesGroup.title);
+            recipesTab.appendChild(alternateRecipesGroup.div);
+        }
+        if (eventsRecipesGroup.div.childElementCount !== 0)
+        {
+            recipesTab.appendChild(eventsRecipesGroup.title);
+            recipesTab.appendChild(eventsRecipesGroup.div);
         }
 
         tabSelector.addEventListener("click", () =>