diff --git a/src/bin/BinCardV2.tsx b/src/bin/BinCardV2.tsx
index 3084edc..b4b465c 100644
--- a/src/bin/BinCardV2.tsx
+++ b/src/bin/BinCardV2.tsx
@@ -200,25 +200,27 @@ export default function BinCard(props: Props) {
 
   const typeDisplay = () => {
     let grainType = bin.settings.inventory?.grainType ?? pond.Grain.GRAIN_NONE;
-    if (bin.storage() === pond.BinStorage.BIN_STORAGE_SUPPORTED_GRAIN) {
-      return (
-        <Box>
-          <Typography variant="subtitle2" style={{ fontSize: "0.7rem", fontWeight: 700 }}>
-            {GrainDescriber(grainType).name}
-          </Typography>
-          <Typography variant="subtitle2" style={{ fontSize: "0.7rem", fontWeight: 700 }}>
-            {bin.settings.inventory?.grainSubtype}
-          </Typography>
-        </Box>
+    switch (bin.storage()){
+      case pond.BinStorage.BIN_STORAGE_SUPPORTED_GRAIN:
+        return (
+          <Box>
+            <Typography variant="subtitle2" style={{ fontSize: "0.7rem", fontWeight: 700 }}>
+              {GrainDescriber(grainType).name}
+            </Typography>
+            <Typography variant="subtitle2" style={{ fontSize: "0.7rem", fontWeight: 700 }}>
+              {bin.settings.inventory?.grainSubtype}
+            </Typography>
+          </Box>
+        )
+      default:
+        return (
+          <Box>
+            <Typography variant="subtitle2" style={{ fontSize: "0.7rem", fontWeight: 700 }}>
+              {bin.grainName()}
+            </Typography>
+          </Box>
       );
     }
-    return (
-      <Box>
-        <Typography variant="subtitle2" style={{ fontSize: "0.7rem", fontWeight: 700 }}>
-          {bin.settings.inventory?.customTypeName}
-        </Typography>
-      </Box>
-    );
   };
 
   const tempDisplay = () => {
diff --git a/src/bin/BinSettings.tsx b/src/bin/BinSettings.tsx
index 3cb4bf7..69e0510 100644
--- a/src/bin/BinSettings.tsx
+++ b/src/bin/BinSettings.tsx
@@ -449,6 +449,11 @@ export default function BinSettings(props: Props) {
       form.inventory.inventoryControl = inventoryControl
       form.inventory.autoThreshold = autoFillThreshold
       form.inventory.lidarDropCm = getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? lidarDropDistance * 30.48 : lidarDropDistance
+      if(form.inventory.grainType !== pond.Grain.GRAIN_CUSTOM){
+        form.inventory.customGrain = undefined
+      }else{
+        form.inventory.customGrain = customGrain
+      }
     }
 
     binAPI
@@ -498,7 +503,11 @@ export default function BinSettings(props: Props) {
           form.inventory.autoThreshold = autoFillThreshold
           //if the users preferences are in feet convert the distance to cm otherwise it was entered as cm so use that
           form.inventory.lidarDropCm = getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? lidarDropDistance * 30.48 : lidarDropDistance
-          form.inventory.customGrain = customGrain
+          if(form.inventory.grainType !== pond.Grain.GRAIN_CUSTOM){
+            form.inventory.customGrain = undefined
+          }else{
+            form.inventory.customGrain = customGrain
+          }
         }
         binAPI
           .updateBin(bin.key(), form, as)
diff --git a/src/bin/BinVisualizerV2.tsx b/src/bin/BinVisualizerV2.tsx
index 77c930d..3895a13 100644
--- a/src/bin/BinVisualizerV2.tsx
+++ b/src/bin/BinVisualizerV2.tsx
@@ -70,6 +70,7 @@ import Edit from "@mui/icons-material/Edit";
 import { makeStyles } from "@mui/styles";
 import ButtonGroup from "common/ButtonGroup";
 import ModeChangeDialog from "./conditioning/modeChangeDialog";
+import CustomGrainForm from "grain/CustomGrainForm";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -286,6 +287,7 @@ export default function BinVisualizer(props: Props) {
 
   const [openModeChange, setOpenModeChange] = useState(false)
   const [modeChangeInProgress, setModeChangeInProgress] = useState(false)
+  const [newGrainSettings, setNewGrainSettings] = useState<pond.GrainSettings>()
 
   useEffect(() => {
     setModeTime(moment(bin.status.lastModeChange));
@@ -327,6 +329,7 @@ export default function BinVisualizer(props: Props) {
       setBushPerTonne(bin.settings.inventory.bushelsPerTonne.toFixed(2));
       setGrainSubtype(bin.subtype());
       setNewBinMode(bin.settings.mode);
+      setNewGrainSettings(bin.customGrain());
     }
     if (bin.settings) {
       let t = bin.settings.outdoorTemp;
@@ -515,18 +518,13 @@ export default function BinVisualizer(props: Props) {
     const capacity = bin.settings.specs?.bushelCapacity ?? 0;
     const grainBushels = bin.bushels();
     const isEmpty = bin.settings.inventory?.empty === true || !grainBushels || grainBushels <= 0;
-    const grainType = bin.settings.inventory?.grainType;
-    const grainTypeName = isEmpty || !grainType ? "" : GrainDescriber(grainType).name;
-    const customTypeName = bin.settings.inventory?.customTypeName;
     const grainSubtype = bin.settings.inventory?.grainSubtype;
     return (
       <Box>
         {/* grain display */}
         <Box display="flex" justifyContent="space-between">
           <Typography variant="subtitle2" color="textPrimary" style={{ fontWeight: 800 }}>
-            {bin.storage() === pond.BinStorage.BIN_STORAGE_SUPPORTED_GRAIN
-              ? grainTypeName
-              : customTypeName}
+            {isEmpty ? "" : bin.grainName()}
             {grainSubtype !== "" ? " - " + grainSubtype : ""}
           </Typography>
           <Box
@@ -768,6 +766,7 @@ export default function BinVisualizer(props: Props) {
       setGrainType(bin.settings.inventory.grainType);
       setGrainOption(ToGrainOption(bin.settings.inventory.grainType));
       setBushPerTonne(bin.settings.inventory.bushelsPerTonne.toFixed(2));
+      setNewGrainSettings(bin.customGrain())
       setGrainSubtype(bin.subtype());
     }
     setGrainChangeDialog(false);
@@ -799,11 +798,13 @@ export default function BinVisualizer(props: Props) {
                       setCustomTypeName("");
                       setGrainOption(ToGrainOption(pond.Grain.GRAIN_NONE));
                       if (checked) {
-                        setStorageType(pond.BinStorage.BIN_STORAGE_SUPPORTED_GRAIN);
-                        setGrainType(pond.Grain.GRAIN_CUSTOM);
-                      } else {
                         setStorageType(pond.BinStorage.BIN_STORAGE_UNSUPPORTED_GRAIN);
+                        setGrainType(pond.Grain.GRAIN_CUSTOM);
+                        setNewGrainSettings(bin.customGrain())
+                      } else {
+                        setStorageType(pond.BinStorage.BIN_STORAGE_SUPPORTED_GRAIN);
                         setGrainType(pond.Grain.GRAIN_NONE);
+                        setNewGrainSettings(undefined)
                       }
                     }}
                     name="storage"
@@ -834,7 +835,7 @@ export default function BinVisualizer(props: Props) {
           )}
           {isCustomInventory ? (
             <React.Fragment>
-              <TextField
+              {/* <TextField
                 label="Type"
                 value={customTypeName}
                 type="text"
@@ -859,7 +860,8 @@ export default function BinVisualizer(props: Props) {
                   variant="outlined"
                   className={classes.bottomSpacing}
                 />
-              )}
+              )} */}
+              <CustomGrainForm initialGrain={bin.customGrain()} onGrainSettingsChange={settings => {setNewGrainSettings(settings)}}/>
             </React.Fragment>
           ) : (
             <TextField
@@ -1975,6 +1977,7 @@ export default function BinVisualizer(props: Props) {
         ? 0
         : parseFloat(bushPerTonne);
       b.settings.inventory.grainSubtype = grainSubtype;
+      b.settings.inventory.customGrain = newGrainSettings
     }
 
     if (b.settings.outdoorTemp !== undefined) {
diff --git a/src/bin/graphs/BinGraphs.tsx b/src/bin/graphs/BinGraphs.tsx
index e28c3ae..253ee13 100644
--- a/src/bin/graphs/BinGraphs.tsx
+++ b/src/bin/graphs/BinGraphs.tsx
@@ -170,18 +170,18 @@ export default function BinGraphs(props: Props) {
     setEndDate(newEndDate);
   };
 
-  const determineGrainColour = () => {
-    let col = "yellow";
-    let binInv = bin.settings.inventory;
-    if (binInv) {
-      if (binInv.grainType === pond.Grain.GRAIN_CUSTOM) {
-        col = stringToMaterialColour(binInv.customTypeName);
-      } else if (binInv.grainType !== pond.Grain.GRAIN_NONE) {
-        col = GrainDescriber(binInv.grainType).colour;
-      }
-    }
-    return col;
-  };
+  // const determineGrainColour = () => {
+  //   let col = "yellow";
+  //   let binInv = bin.settings.inventory;
+  //   if (binInv) {
+  //     if (binInv.grainType === pond.Grain.GRAIN_CUSTOM) {
+  //       col = stringToMaterialColour(binInv.customTypeName);
+  //     } else if (binInv.grainType !== pond.Grain.GRAIN_NONE) {
+  //       col = GrainDescriber(binInv.grainType).colour;
+  //     }
+  //   }
+  //   return col;
+  // };
 
   const inventoryGraph = () => {
     return (
@@ -193,7 +193,7 @@ export default function BinGraphs(props: Props) {
             endDate={endDate}
             binLoading={binLoading}
             bin={bin}
-            colour={determineGrainColour()}
+            colour={bin.grainColour()}
             fertilizerBin={bin.settings.storage === pond.BinStorage.BIN_STORAGE_FERTILIZER}
           />
         </Grid>
diff --git a/src/component/ComponentForm.tsx b/src/component/ComponentForm.tsx
index 354094c..3334b83 100644
--- a/src/component/ComponentForm.tsx
+++ b/src/component/ComponentForm.tsx
@@ -391,7 +391,6 @@ export default function ComponentForm(props: Props) {
   };
 
   const updateCustomGrain = (grainSettings?: pond.GrainSettings) => {
-    console.log("update custom grain")
     let f = cloneDeep(form)
     f.component.settings.customGrain = grainSettings
     f.component.settings.grainType = pond.Grain.GRAIN_CUSTOM
diff --git a/src/component/UnitMeasurementSummary.tsx b/src/component/UnitMeasurementSummary.tsx
index d276136..ca2dcf0 100644
--- a/src/component/UnitMeasurementSummary.tsx
+++ b/src/component/UnitMeasurementSummary.tsx
@@ -10,6 +10,7 @@ import { Pressure } from "models/Pressure";
 import { GrainCable } from "models/GrainCable";
 import { extension, Summary } from "pbHelpers/ComponentType";
 import { makeStyles } from "@mui/styles";
+import { stringToMaterialColour } from "utils";
 
 interface Props {
   component: Component | Plenum | Pressure | GrainCable;
@@ -109,7 +110,7 @@ export default function UnitMeasurementSummary(props: Props) {
 
   const grainColor = () => {
     if(component.settings.grainType === pond.Grain.GRAIN_CUSTOM && component.settings.customGrain?.name){
-      return 
+      return stringToMaterialColour(component.settings.customGrain.name)
     }
     return GrainDescriber(component.settings.grainType).colour
   }
diff --git a/src/grain/CustomGrainForm.tsx b/src/grain/CustomGrainForm.tsx
index 1020ce2..ae20d93 100644
--- a/src/grain/CustomGrainForm.tsx
+++ b/src/grain/CustomGrainForm.tsx
@@ -65,7 +65,7 @@ export default function CustomGrainForm(props: Props) {
           })
         })
       }
-      setGrainOptions(options)
+      setGrainOptions([...options])
       setGrainMap(map)
     })
   },[grainAPI])
diff --git a/src/models/Bin.ts b/src/models/Bin.ts
index 095f151..b208c1e 100644
--- a/src/models/Bin.ts
+++ b/src/models/Bin.ts
@@ -90,7 +90,11 @@ export class Bin {
   public customType(): string {
     let c = "";
     if (this.settings.inventory) {
-      c = this.settings.inventory.customTypeName;
+      if (this.settings.inventory.customGrain){
+        c = this.settings.inventory.customGrain.name
+      }else{
+        c = this.settings.inventory.customTypeName;
+      }
     }
     return c;
   }