diff --git a/src/bin/BinVisualizerV2.tsx b/src/bin/BinVisualizerV2.tsx
index c51908a..37ed664 100644
--- a/src/bin/BinVisualizerV2.tsx
+++ b/src/bin/BinVisualizerV2.tsx
@@ -1556,7 +1556,7 @@ export default function BinVisualizer(props: Props) {
             let device = componentDevices.get(fan.key)
             if(fanComp && device){
               return (
-                <BinControllerDisplay component={fanComp} deviceID={device} currentState/>
+                <BinControllerDisplay key={fanComp.key()} component={fanComp} deviceID={device} currentState/>
               )
             }
           })}
@@ -1565,7 +1565,7 @@ export default function BinVisualizer(props: Props) {
             let device = componentDevices.get(heater.key)
             if(heaterComp && device){
               return (
-                <BinControllerDisplay component={heaterComp} deviceID={device} currentState={heater.state}/>
+                <BinControllerDisplay key={heaterComp.key()} component={heaterComp} deviceID={device} currentState={heater.state}/>
               )
             }
           })}
diff --git a/src/gate/GateDevice.tsx b/src/gate/GateDevice.tsx
index f62dd25..a445b28 100644
--- a/src/gate/GateDevice.tsx
+++ b/src/gate/GateDevice.tsx
@@ -126,9 +126,24 @@ export default function GateDevice(props: Props) {
     }
   }, [comprehensiveDevice, gate, linkedCompList, user]);
 
-  const gateComponentUpdate = (componentKey: string, gateCompType: pond.GateComponentType) => {
+  const gateComponentUpdate = (oldKey: string, componentKey: string, gateCompType: pond.GateComponentType) => {
+    let promises: any[] = []
+    if (oldKey !== "") {
+      //the promise for removing the pref from the old component
+      promises.push(gateAPI
+        .updatePrefs(
+          gate.key,
+          "component",
+          device.id() + ":" + oldKey,
+          pond.GateComponentType.GATE_COMPONENT_TYPE_UNKNOWN,
+          [gate.key],
+          ["gate"],
+          as
+        ))
+    }
     if (componentKey !== "") {
-      gateAPI
+      //the promise for adding the pref to the new component
+      promises.push(gateAPI
         .updatePrefs(
           gate.key,
           "component",
@@ -137,11 +152,17 @@ export default function GateDevice(props: Props) {
           [gate.key],
           ["gate"],
           as
-        )
-        .then(resp => {
-          openSnack("Component Prefence Updated");
-        });
+        ))
     }
+    Promise.all(promises).then(resp => {
+        openSnack("Component Prefence Updated");
+        let clone = cloneDeep(gate.preferences)
+        clone[oldKey] = pond.GateComponentType.GATE_COMPONENT_TYPE_UNKNOWN
+        clone[componentKey] = gateCompType
+        gate.preferences = clone
+
+      }).catch(
+      );
   };
 
   useEffect(() => {
@@ -205,7 +226,7 @@ export default function GateDevice(props: Props) {
         style={{ fontSize: 8 }}
         onChange={e => {
           var key = e.target.value as string;
-          gateComponentUpdate(key, pond.GateComponentType.GATE_COMPONENT_TYPE_AMBIENT);
+          gateComponentUpdate(ambientKey, key, pond.GateComponentType.GATE_COMPONENT_TYPE_AMBIENT);
           setAmbientKey(key);
           if (tempKey === key) {
             setTempKey("");
@@ -238,6 +259,7 @@ export default function GateDevice(props: Props) {
         style={{ fontSize: 8 }}
         onChange={e => {
           gateComponentUpdate(
+            tempKey,
             e.target.value as string,
             pond.GateComponentType.GATE_COMPONENT_TYPE_TEMP
           );
@@ -273,6 +295,7 @@ export default function GateDevice(props: Props) {
         style={{ fontSize: 8 }}
         onChange={e => {
           gateComponentUpdate(
+            pressureKey,
             e.target.value as string,
             pond.GateComponentType.GATE_COMPONENT_TYPE_PRESSURE
           );
diff --git a/src/gate/GateDeviceInteraction.tsx b/src/gate/GateDeviceInteraction.tsx
index 55140d4..0303123 100644
--- a/src/gate/GateDeviceInteraction.tsx
+++ b/src/gate/GateDeviceInteraction.tsx
@@ -100,6 +100,7 @@ export default function GateDeviceInteraction(props: Props) {
       } else if (
           gate.preferences[component.key()] === pond.GateComponentType.GATE_COMPONENT_TYPE_PRESSURE
         ) {
+          console.log(component)
           setPressureComponent(component);
           setPressureSource(
               quack.ComponentID.create({
@@ -115,7 +116,7 @@ export default function GateDeviceInteraction(props: Props) {
     if(compDevice.device){
       setDevice(Device.create(compDevice.device))
     }
-  }, [gate, densityTemp, user, compDevice]);
+  }, [gate, densityTemp, user, compDevice, gate.preferences]);
 
   const buttonDisabled = () => {
     if (greenComponent === undefined) return true