diff --git a/src/bin/binModes/BinModeController.tsx b/src/bin/binModes/BinModeController.tsx
new file mode 100644
index 0000000..90aa3d1
--- /dev/null
+++ b/src/bin/binModes/BinModeController.tsx
@@ -0,0 +1,54 @@
+import { Box, Button, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import ResponsiveDialog from "common/ResponsiveDialog";
+import { Bin } from "models";
+import { pond } from "protobuf-ts/pond";
+import React from "react";
+import StorageMode from "./StorageMode";
+import DryingMode from "./DryingMode";
+import HydratingMode from "./HydratingMode";
+import CooldownMode from "./CooldownMode";
+
+interface Props {
+    newMode: pond.BinMode //used to control which dialog to open
+    open: boolean
+    onClose: () => void
+    bin: Bin
+}
+
+export default function BinModeControl(props: Props) {
+    const {open, onClose, newMode} = props
+
+    //the mode controller could handle the actual api call for adding the interactions etc but the dialogs would create them and pass them up
+
+    //steps involved for devices when changing the bin mode:
+    //remove conflicting interactions
+    //add new interactions
+    //updating the controllers
+
+    const renderContent = () => {
+        switch(newMode){
+            case pond.BinMode.BIN_MODE_DRYING:
+                return <DryingMode />
+            case pond.BinMode.BIN_MODE_HYDRATING:
+                return <HydratingMode />
+            case pond.BinMode.BIN_MODE_COOLDOWN:
+                return <CooldownMode />
+            default:
+                return <StorageMode />
+        }
+    }
+
+    return (
+        <ResponsiveDialog open={open} onClose={onClose}>
+            <DialogTitle>Change Bin Mode</DialogTitle>
+            <DialogContent>
+                {renderContent()}
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}>
+                    Close
+                </Button>
+            </DialogActions>
+        </ResponsiveDialog>
+    )
+}
\ No newline at end of file
diff --git a/src/bin/binModes/CooldownMode.tsx b/src/bin/binModes/CooldownMode.tsx
new file mode 100644
index 0000000..173cf15
--- /dev/null
+++ b/src/bin/binModes/CooldownMode.tsx
@@ -0,0 +1,9 @@
+import { Box } from "@mui/material";
+
+export default function CooldownMode(){
+    return (
+        <Box>
+            
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/src/bin/binModes/DryingMode.tsx b/src/bin/binModes/DryingMode.tsx
new file mode 100644
index 0000000..7dd57a5
--- /dev/null
+++ b/src/bin/binModes/DryingMode.tsx
@@ -0,0 +1,9 @@
+import { Box } from "@mui/material";
+
+export default function DryingMode(){
+    return (
+        <Box>
+            
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/src/bin/binModes/HydratingMode.tsx b/src/bin/binModes/HydratingMode.tsx
new file mode 100644
index 0000000..f87ca98
--- /dev/null
+++ b/src/bin/binModes/HydratingMode.tsx
@@ -0,0 +1,9 @@
+import { Box } from "@mui/material";
+
+export default function HydratingMode(){
+    return (
+        <Box>
+            
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/src/bin/binModes/StorageMode.tsx b/src/bin/binModes/StorageMode.tsx
new file mode 100644
index 0000000..67f82dc
--- /dev/null
+++ b/src/bin/binModes/StorageMode.tsx
@@ -0,0 +1,9 @@
+import { Box } from "@mui/material";
+
+export default function StorageMode(){
+    return (
+        <Box>
+            
+        </Box>
+    )
+}
\ No newline at end of file