diff --git a/src/bin/AddBinFab.tsx b/src/bin/AddBinFab.tsx
new file mode 100644
index 0000000..387bc20
--- /dev/null
+++ b/src/bin/AddBinFab.tsx
@@ -0,0 +1,59 @@
+import { Fab, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import AddBinIcon from "assets/products/bindapt/addBin.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useMobile } from "hooks";
+
+interface Props {
+ onClick: () => void;
+ pulse: boolean;
+}
+
+const useStyles = makeStyles((theme: Theme) => {
+ const yellow = "#ffea00";
+ return ({
+ "@keyframes pulsate": {
+ to: {
+ boxShadow: "0 0 0 16px" + yellow + "00"
+ }
+ },
+ fab: {
+ background: yellow,
+ "&:hover": {
+ background: yellow
+ },
+ "&:focus": {
+ background: yellow
+ },
+ position: "fixed",
+ bottom: theme.spacing(8), //for mobile navigator
+ right: theme.spacing(2),
+ [theme.breakpoints.up("sm")]: {
+ bottom: theme.spacing(2)
+ }
+ },
+ pulse: {
+ boxShadow: "0 0 0 0 " + yellow + "75",
+ animation: "$pulsate 1.75s infinite cubic-bezier(0.66, 0.33, 0, 1)"
+ }
+ });
+});
+
+export default function AddBinFab(props: Props) {
+ const { onClick, pulse } = props;
+ const classes = useStyles();
+ const isMobile = useMobile();
+
+ const pulseString = pulse ? classes.pulse : "";
+ const classString = classes.fab + " " + pulseString;
+
+ return (
+
+
+
+ );
+}
diff --git a/src/bin/BinSelector.tsx b/src/bin/BinSelector.tsx
new file mode 100644
index 0000000..3f330f7
--- /dev/null
+++ b/src/bin/BinSelector.tsx
@@ -0,0 +1,154 @@
+import { Grid2 as Grid, TextField } from "@mui/material";
+import { ImportBins, jsonBin } from "common/DataImports/BinCables/BinCableImporter";
+import SearchSelect, { Option } from "common/SearchSelect";
+import { useMobile } from "hooks";
+import { pond } from "protobuf-ts/pond";
+import React, { useEffect, useState } from "react";
+import { getDistanceUnit } from "utils";
+
+interface Props {
+ optionsChanged: (binOptions: jsonBin[]) => void;
+ vertical?: boolean;
+}
+
+export default function BinSelector(props: Props) {
+ const { optionsChanged, vertical } = props;
+ const isMobile = useMobile();
+ const [manufacturerOptions, SetManufacturerOptions] = useState