diff --git a/src/SatisfactoryTree.Tests/ProductionTests.cs b/src/SatisfactoryTree.Tests/ProductionTests.cs
index e02ad67..1fa4ab2 100644
--- a/src/SatisfactoryTree.Tests/ProductionTests.cs
+++ b/src/SatisfactoryTree.Tests/ProductionTests.cs
@@ -249,20 +249,20 @@ public void ReinforcedIronPlateProductionTest()
     IronIngot--""Iron Ingot<br>(15 units/min)""-->IronRod
 ";
             string expectedWithImagesResult = @"flowchart LR
-    ReinforcedIronPlate(""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/AssemblerMk1_256.png' style='max-width:100px' alt='Assembler'></span><br> x1 Assembler<br>(Reinforced Iron Plate)</div>"")
-    ReinforcedIronPlateOutput{{""<div align=center><img src='https://localhost:7015/Images/Items/ReinforcedIronPlate_256.png' style='max-width:100px' alt='Reinforced Iron Plate'><br>5 Reinforced Iron Plate</div>""}}
-    IronPlate(""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/ConstructorMk1_256.png' style='max-width:100px' alt='Constructor'></span><br> x1.5 Constructor<br>(Iron Plate)</div>"")
-    IronIngot(""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/SmelterMk1_256.png' style='max-width:100px' alt='Smelter'></span><br> x2 Smelter<br>(Iron Ingot)</div>"")
-    IronOre(""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/MinerMk1_256.png' style='max-width:100px' alt='Mining Machine Mk1'></span><br> x1 Mining Machine Mk1<br>(Iron Ore)</div>"")
-    Screw(""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/ConstructorMk1_256.png' style='max-width:100px' alt='Constructor'></span><br> x1.5 Constructor<br>(Screw)</div>"")
-    IronRod(""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/ConstructorMk1_256.png' style='max-width:100px' alt='Constructor'></span><br> x1 Constructor<br>(Iron Rod)</div>"")
-    IronPlate--Iron Plate<br>(30 units/min)-->ReinforcedIronPlate
-    Screw--Screw<br>(60 units/min)-->ReinforcedIronPlate
-    ReinforcedIronPlate--Reinforced Iron Plate<br>(5 units/min)-->ReinforcedIronPlateOutput
-    IronIngot--Iron Ingot<br>(45 units/min)-->IronPlate
-    IronOre--Iron Ore<br>(60 units/min)-->IronIngot
-    IronRod--Iron Rod<br>(15 units/min)-->Screw
-    IronIngot--Iron Ingot<br>(15 units/min)-->IronRod
+    ReinforcedIronPlate[""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/AssemblerMk1_256.png' style='max-width:100px' alt='Assembler'></span><br> x1 Assembler<br>(Reinforced Iron Plate)</div>""]
+    ReinforcedIronPlate_Item([""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Items/ReinforcedIronPlate_256.png' style='max-width:100px' alt='Reinforced Iron Plate'></span><br> x5 Reinforced Iron Plate</div>""])
+    IronPlate[""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/ConstructorMk1_256.png' style='max-width:100px' alt='Constructor'></span><br> x1.5 Constructor<br>(Iron Plate)</div>""]
+    IronIngot[""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/SmelterMk1_256.png' style='max-width:100px' alt='Smelter'></span><br> x2 Smelter<br>(Iron Ingot)</div>""]
+    IronOre[""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/MinerMk1_256.png' style='max-width:100px' alt='Mining Machine Mk1'></span><br> x1 Mining Machine Mk1<br>(Iron Ore)</div>""]
+    Screw[""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/ConstructorMk1_256.png' style='max-width:100px' alt='Constructor'></span><br> x1.5 Constructor<br>(Screw)</div>""]
+    IronRod[""<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/ConstructorMk1_256.png' style='max-width:100px' alt='Constructor'></span><br> x1 Constructor<br>(Iron Rod)</div>""]
+    IronPlate--""Iron Plate<br>(30 units/min)""-->ReinforcedIronPlate
+    Screw--""Screw<br>(60 units/min)""-->ReinforcedIronPlate
+    ReinforcedIronPlate--""Reinforced Iron Plate<br>(5 units/min)""-->ReinforcedIronPlate_Item
+    IronIngot--""Iron Ingot<br>(45 units/min)""-->IronPlate
+    IronOre--""Iron Ore<br>(60 units/min)""-->IronIngot
+    IronRod--""Iron Rod<br>(15 units/min)""-->Screw
+    IronIngot--""Iron Ingot<br>(15 units/min)""-->IronRod
 ";
 
             //Act
@@ -271,7 +271,7 @@ public void ReinforcedIronPlateProductionTest()
                 result = graph.BuildProductionPlan(itemGoal);
                 results = result.ProductionItems;
                 mermaidResult = graph.ToMermaidString();
-                mermaidWithImagesResult = graph.ToMermaidStringWithImages();
+                mermaidWithImagesResult = graph.ToMermaidString(true);
             }
 
             //Assert
@@ -469,7 +469,6 @@ public void PlasticProductionTest()
             string expectedResult = @"flowchart LR
     Plastic[""x1 Refinery<br>(Plastic)""]
     Plastic_Item([20 Plastic])
-    Plastic[""x1 Refinery<br>(Plastic)""]
     HeavyOilResidue_Item([10 Heavy Oil Residue])
     CrudeOil[""x0.3 Oil Extractor<br>(Crude Oil)""]
     CrudeOil--""Crude Oil<br>(30 units/min)""-->Plastic
@@ -512,14 +511,13 @@ public void CircuitBoardProductionTest()
     CopperIngot[""x0.7 Smelter<br>(Copper Ingot)""]
     CopperOre[""x0.4 Mining Machine Mk1<br>(Copper Ore)""]
     Plastic[""x1 Refinery<br>(Plastic)""]
-    Plastic[""x1 Refinery<br>(Plastic)""]
     HeavyOilResidue_Item([10 Heavy Oil Residue])
     CrudeOil[""x0.3 Oil Extractor<br>(Crude Oil)""]
     CopperSheet--""Copper Sheet<br>(10 units/min)""-->CircuitBoard
-    Plastic--""Plastic<br>(20.0 units/min)""-->CircuitBoard
+    Plastic--""Plastic<br>(20.1 units/min)""-->CircuitBoard
     CircuitBoard--""Circuit Board<br>(5 units/min)""-->CircuitBoard_Item
     CopperIngot--""Copper Ingot<br>(20 units/min)""-->CopperSheet
-    CopperOre--""Copper Ore<br>(20.0 units/min)""-->CopperIngot
+    CopperOre--""Copper Ore<br>(20.1 units/min)""-->CopperIngot
     CrudeOil--""Crude Oil<br>(30 units/min)""-->Plastic
     Plastic--""Heavy Oil Residue<br>(10 units/min)""-->HeavyOilResidue_Item
 ";
@@ -562,14 +560,14 @@ public void AluminumIngotProductionTest()
     Bauxite[""x0.2 Mining Machine Mk1<br>(Bauxite)""]
     Coal[""x0.1 Mining Machine Mk1<br>(Coal)""]
     RawQuartz[""x0.2 Assembler<br>(Raw Quartz)""]
-    AluminumScrap--""Aluminum Scrap<br>(15.0 units/min)""-->AluminumIngot
-    Silica--""Silica<br>(12.5 units/min)""-->AluminumIngot
+    AluminumScrap--""Aluminum Scrap<br>(15.1 units/min)""-->AluminumIngot
+    Silica--""Silica<br>(12.6 units/min)""-->AluminumIngot
     AluminumIngot--""Aluminum Ingot<br>(10 units/min)""-->AluminumIngot_Item
-    AluminaSolution--""Alumina Solution<br>(10.0 units/min)""-->AluminumScrap
-    Coal--""Coal<br>(5.0 units/min)""-->AluminumScrap
-    Bauxite--""Bauxite<br>(10.0 units/min)""-->AluminaSolution
-    Water--""Water<br>(15.0 units/min)""-->AluminaSolution
-    RawQuartz--""Raw Quartz<br>(30.0 units/min)""-->Silica
+    AluminaSolution--""Alumina Solution<br>(10.1 units/min)""-->AluminumScrap
+    Coal--""Coal<br>(5.1 units/min)""-->AluminumScrap
+    Bauxite--""Bauxite<br>(10.1 units/min)""-->AluminaSolution
+    Water--""Water<br>(15.1 units/min)""-->AluminaSolution
+    RawQuartz--""Raw Quartz<br>(30.1 units/min)""-->Silica
 ";
 
             //Act
diff --git a/src/SatisfactoryTree.Web/Controllers/HomeController.cs b/src/SatisfactoryTree.Web/Controllers/HomeController.cs
index 0510360..f20c9eb 100644
--- a/src/SatisfactoryTree.Web/Controllers/HomeController.cs
+++ b/src/SatisfactoryTree.Web/Controllers/HomeController.cs
@@ -33,12 +33,15 @@ public IActionResult Index()
         public IActionResult Production()
         {
             SatisfactoryProduction satisfactoryProduction = new();
-            Item productionItem = ItemPoolTier1.Plastic();
-            decimal productionQuantity = 20M;
+            //Item productionItem = ItemPoolTier1.Plastic();
+            //decimal productionQuantity = 20M;
+            Item productionItem = ItemPoolTier3.ReinforcedIronPlate();
+            decimal productionQuantity = 5M;
+
             ProductionCalculation productionCalculation = satisfactoryProduction.BuildProductionPlan(new ProductionItem(productionItem, productionQuantity));
             if (productionCalculation != null)
             {
-                string graph3 = satisfactoryProduction.ToMermaidStringWithImages();
+                string graph3 = satisfactoryProduction.ToMermaidString(true);
                 //Debug.WriteLine(graph3);
                 return View(model: graph3);
             }
diff --git a/src/SatisfactoryTree.Web/Views/Home/Production.cshtml b/src/SatisfactoryTree.Web/Views/Home/Production.cshtml
index 1112a9f..06dd1a1 100644
--- a/src/SatisfactoryTree.Web/Views/Home/Production.cshtml
+++ b/src/SatisfactoryTree.Web/Views/Home/Production.cshtml
@@ -6,11 +6,32 @@
 <h2>Production Graph</h2>
 <body>
     Here is a mermaid diagram:
-    <pre class="mermaid">
+@*     <pre class="mermaid">
         @Html.Raw(Model)
-    </pre>
+        </pre> *@
+    <div id="graphDiv" style="border:solid 1px darkgray">
+
+    </div>
+    <script src="https://bumbu.me/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
     <script type="module">
         import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-        mermaid.initialize({ startOnLoad: true });
+        mermaid.initialize({ startOnLoad: false });
+        // Example of using the render function
+        const drawDiagram = async function () {
+            const element = document.querySelector('#graphDiv');
+            const graphDefinition = `@Html.Raw(Model)`;
+            const { svg } = await mermaid.render('mySvgId', graphDefinition);
+            element.innerHTML = svg.replace(/[ ]*max-width:[ 0-9\.]*px;/i, '');
+            var panZoomTiger = svgPanZoom('#mySvgId', {
+                zoomEnabled: true,
+                controlIconsEnabled: true,
+                fit: true,
+                center: true,
+                minZoom: 0.1
+            })
+            document.getElementById('mySvgId').setAttribute("height", "1000px");
+            document.getElementById('mySvgId').setAttribute("width", "2000px");
+        };
+        await drawDiagram();
     </script>
 </body>
\ No newline at end of file
diff --git a/src/SatisfactoryTree/SatisfactoryProduction.cs b/src/SatisfactoryTree/SatisfactoryProduction.cs
index 03adc94..12ce495 100644
--- a/src/SatisfactoryTree/SatisfactoryProduction.cs
+++ b/src/SatisfactoryTree/SatisfactoryProduction.cs
@@ -202,7 +202,7 @@ private bool ProcessOutputItem(ProductionItem targetItem)
         }
 
         //Create the mermaid string for the production plan
-        public string ToMermaidString()
+        public string ToMermaidString(bool includeImages = false)
         {
             string direction = "LR";
             List<MermaidDotNet.Models.Node> nodes = [];
@@ -210,15 +210,29 @@ public string ToMermaidString()
             {
                 if (item != null && item.Item != null)
                 {
-                    nodes.Add(new(item.Item.Recipes[0].Name.Replace(" ", ""), '"' + "x" + RoundUpAndFormat(item.BuildingQuantityRequired) + " " + item.Item.Recipes[0].Building + "<br>(" + item.Item.Recipes[0].Name + ")" + '"'));
+                    string recipeName = item.Item.Recipes[0].Name;
+                    string recipeBuildingName = item.Item.Recipes[0].Building;
+                    string recipeBuildingQuantity = RoundUpAndFormat(item.BuildingQuantityRequired);
+                    string recipeBuildingImage = AllBuildings.FindBuilding(item.Item.Recipes[0].Building)?.Image;
+                    string recipeText = '"' + "x" + recipeBuildingQuantity + " " + recipeBuildingName + "<br>(" + recipeName + ")" + '"';
+                    if (includeImages)
+                    {
+                        recipeText = "\"<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/" + recipeBuildingImage + "' style='max-width:100px' alt='" + recipeBuildingName + "'></span><br> x" + recipeBuildingQuantity + " " + recipeBuildingName + "<br>(" + recipeName + ")</div>\"";
+                    }
+                    if (nodes.Find(p => p.Name == recipeName) == null)
+                    {
+                        nodes.Add(new(recipeName, recipeText));
+                    }
+                    // If it's the final output, add an extra node to show the output item
                     if (item.OutputItem == true)
                     {
-                        string finalItemQuantity = item.Quantity.ToString("0.0");
-                        if ((int)item.Quantity == item.Quantity)
+                        string finalNode = item.Item?.Name + "_Item";
+                        string finalNodeText = RoundUpAndFormat(item.Quantity) + " " + item.Item?.Name;
+                        if (includeImages)
                         {
-                            finalItemQuantity = item.Quantity.ToString("0");
+                            finalNodeText = "\"<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Items/" + item.Item?.Image + "' style='max-width:100px' alt='" + item.Item?.Name + "'></span><br> x" + RoundUpAndFormat(item.Quantity) + " " + item.Item?.Name + "</div>\"";
                         }
-                        nodes.Add(new(item.Item?.Name.Replace(" ", "") + "_Item", finalItemQuantity + " " + item.Item?.Name, MermaidDotNet.Models.Node.ShapeType.Stadium));
+                        nodes.Add(new(finalNode, finalNodeText, MermaidDotNet.Models.Node.ShapeType.Stadium));
                     }
                 }
             }
@@ -229,14 +243,9 @@ public string ToMermaidString()
                 {
                     foreach (KeyValuePair<string, decimal> itemInput in item.Dependencies)
                     {
-                        string itemQuantity = itemInput.Value.ToString("0.0");
-                        if ((int)itemInput.Value == itemInput.Value)
-                        {
-                            itemQuantity = itemInput.Value.ToString("0");
-                        }
-                        string source = itemInput.Key.Replace(" ", "");
-                        string destination = item.Item.Recipes[0].Name.Replace(" ", "");
-                        string text = '"' + itemInput.Key + "<br>(" + itemQuantity + " units/min)" + '"';
+                        string source = itemInput.Key;
+                        string destination = item.Item.Recipes[0].Name;
+                        string text = '"' + itemInput.Key + "<br>(" + RoundUpAndFormat(itemInput.Value) + " units/min)" + '"';
                         MermaidDotNet.Models.Link link = new(source, destination, text);
                         if (!links.Any(g => g.SourceNode == link.SourceNode &&
                                             g.DestinationNode == link.DestinationNode &&
@@ -247,17 +256,13 @@ public string ToMermaidString()
                     }
                     if (item.OutputItem == true)
                     {
-                        string? source;
-                        string? destination;
-                        source = item.Item.Recipes[0].Name.Replace(" ", "");
-                        destination = item.Item.Name.Replace(" ", "") + "_Item";
-                        if (source != null && destination != null)
-                        {
+                        string linkSource = item.Item.Recipes[0].Name;
+                        string linkDestination = item.Item.Name + "_Item";
+                        string linkText = '"' + item.Item.Name + "<br>(" + RoundUpAndFormat(item.Quantity) + " units/min)" + '"';
                             links.Add(new MermaidDotNet.Models.Link(
-                                                source,
-                                                destination,
-                                                '"' + item.Item.Name + "<br>(" + RoundUpAndFormat(item.Quantity) + " units/min)" + '"'));
-                        }
+                                                linkSource,
+                                                linkDestination,
+                                                linkText));
                     }
                 }
             }
@@ -265,40 +270,49 @@ public string ToMermaidString()
             return flowchart.CalculateFlowchart();
         }
 
-        public string ToMermaidStringWithImages()
-        {
-            List<MermaidDotNet.Models.Node> nodes = [];
-            List<MermaidDotNet.Models.Link> links = [];
-            foreach (ProductionItem item in ProductionItems)
-            {
-                string buildingName = "none";
-                if (item.Building != null && item.Building.Name != null)
-                {
-                    buildingName = item.Building.Name;
-                }
-                string buildingImage = "";
-                if (item.Building != null && item.Building.Image != null)
-                {
-                    buildingImage = item.Building.Image;
-                }
-                string itemText = "\"<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/" + buildingImage + "' style='max-width:100px' alt='" + buildingName + "'></span><br> x" + RoundUpAndFormat(item.BuildingQuantityRequired) + " " + buildingName + "<br>(" + item.Name + ")</div>\"";
-                MermaidDotNet.Models.Node node = new(item.Name, itemText, MermaidDotNet.Models.Node.ShapeType.Rounded);
-                nodes.Add(node);
-                foreach (KeyValuePair<string, decimal> dependency in item.Dependencies)
-                {
-                    MermaidDotNet.Models.Link link = new(dependency.Key, item.Name, dependency.Key + "<br>(" + RoundUpAndFormat(dependency.Value) + " units/min)");
-                    links.Add(link);
-                }
-                if (item.OutputItem == true)
-                {
-                    nodes.Add(new(item.Name + "Output", "\"<div align=center><img src='https://localhost:7015/Images/Items/" + item.Item.Image + "' style='max-width:100px' alt='" + item.Name + "'><br>" + RoundUpAndFormat(item.Quantity) + " " + item.Name + "</div>\"", MermaidDotNet.Models.Node.ShapeType.Hexagon));
-                    MermaidDotNet.Models.Link link = new(item.Name, item.Name + "Output", item.Name + "<br>(" + RoundUpAndFormat(item.Quantity) + " units/min)");
-                    links.Add(link);
-                }
-            }
-            MermaidDotNet.Flowchart flowchart = new("LR", nodes, links);
-            return flowchart.CalculateFlowchart();
-        }
+        //public string ToMermaidStringWithImages()
+        //{
+        //    string direction = "LR";
+        //    List<MermaidDotNet.Models.Node> nodes = [];
+        //    foreach (ProductionItem item in ProductionItems)
+        //    {
+        //        string buildingName = "none";
+        //        if (item.Building != null && item.Building.Name != null)
+        //        {
+        //            buildingName = item.Building.Name;
+        //        }
+        //        string buildingImage = "";
+        //        if (item.Building != null && item.Building.Image != null)
+        //        {
+        //            buildingImage = item.Building.Image;
+        //        }
+        //        string itemText = "\"<div align=center><span style='min-width:100px;display:block;'><img src='https://localhost:7015/Images/Buildings/" + buildingImage + "' style='max-width:100px' alt='" + buildingName + "'></span><br> x" + RoundUpAndFormat(item.BuildingQuantityRequired) + " " + buildingName + "<br>(" + item.Name + ")</div>\"";
+        //        MermaidDotNet.Models.Node node = new(item.Item.Recipes[0].Name, itemText, MermaidDotNet.Models.Node.ShapeType.Rounded);
+        //        if (nodes.Find(nodes => nodes.Name == item.Item.Recipes[0].Name) == null)
+        //        {
+        //            nodes.Add(node);
+        //        }
+        //        //nodes.Add(node);
+        //    }
+
+        //    List<MermaidDotNet.Models.Link> links = [];
+        //    foreach (ProductionItem item in ProductionItems)
+        //    {
+        //        foreach (KeyValuePair<string, decimal> dependency in item.Dependencies)
+        //        {
+        //            MermaidDotNet.Models.Link link = new(dependency.Key, item.Item.Recipes[0].Name, dependency.Key + "<br>(" + RoundUpAndFormat(dependency.Value) + " units/min)");
+        //            links.Add(link);
+        //        }
+        //        if (item.OutputItem == true)
+        //        {
+        //            nodes.Add(new(item.Name + "Output", "\"<div align=center><img src='https://localhost:7015/Images/Items/" + item.Item.Image + "' style='max-width:100px' alt='" + item.Name + "'><br>" + RoundUpAndFormat(item.Quantity) + " " + item.Name + "</div>\"", MermaidDotNet.Models.Node.ShapeType.Hexagon));
+        //            MermaidDotNet.Models.Link link = new(item.Item.Recipes[0].Name, item.Name + "Output", item.Name + "<br>(" + RoundUpAndFormat(item.Quantity) + " units/min)");
+        //            links.Add(link);
+        //        }
+        //    }
+        //    MermaidDotNet.Flowchart flowchart = new(direction, nodes, links);
+        //    return flowchart.CalculateFlowchart();
+        //}
 
         //Round up to the nearest decimal point - if one exists
         private static string RoundUpAndFormat(decimal value)