diff --git a/src/bin/BinsList.tsx b/src/bin/BinsList.tsx
index 483df50..ad7ae64 100644
--- a/src/bin/BinsList.tsx
+++ b/src/bin/BinsList.tsx
@@ -23,6 +23,12 @@ interface Props {
   //startingTranslate: number;
   valDisplay?: "high" | "low" | "average";
   insert?: boolean
+  /**
+   * optional function for when you want clicking the card to do something other than navigate to the bin page
+   * @param bin the bin model for the card that was clicked
+   * @returns void
+   */
+  cardClickFunction?: (bin: Bin) => void
 }
 
 const useStyles = makeStyles((_theme) => {
@@ -40,7 +46,7 @@ const useStyles = makeStyles((_theme) => {
 });
 
 export default function BinsList(props: Props) {
-  const { bins, duplicateBin, title, gridView, loadMore, valDisplay, insert } = props;
+  const { bins, duplicateBin, title, gridView, loadMore, valDisplay, insert, cardClickFunction } = props;
   const classes = useStyles();
   // const history = useHistory();
   const navigate = useNavigate()
@@ -53,6 +59,14 @@ export default function BinsList(props: Props) {
     navigate(path, { state: {bin: bins[i]} });
   };
 
+  const cardClicked = (index: number) => {
+    if(cardClickFunction) {
+      cardClickFunction(bins[index])
+    }else{
+      goToBin(index)
+    }
+  }
+
   const leftArrow = () => {
     const visibility = useContext(VisibilityContext);
     //const isFirstVisible = visibility.useIsVisible('first', false)
@@ -95,7 +109,7 @@ export default function BinsList(props: Props) {
             key={i} 
             className={classes.gridListTile} 
             onClick={() => {
-                !duplicate && goToBin(i)
+                !duplicate && cardClicked(i)
               }}>
             <BinCardV2
               bin={b}
@@ -129,7 +143,7 @@ export default function BinsList(props: Props) {
               key={i}
               className={classes.gridListTile}
               onClick={() => {
-                !duplicate && goToBin(i)
+                !duplicate && cardClicked(i)
               }}>
               <BinCardV2
                 bin={b}
diff --git a/src/bin/BinyardDisplay.tsx b/src/bin/BinyardDisplay.tsx
index 6487f4d..a05a172 100644
--- a/src/bin/BinyardDisplay.tsx
+++ b/src/bin/BinyardDisplay.tsx
@@ -42,6 +42,11 @@ import BinsList from "./BinsList";
 interface Props {
   yardKey: string;
   insert?: boolean;
+  /**
+   * function to run when a bin card is clicked, when not passed in will default to attempting to navigate to the bin page by adding the bin key to the url
+   * @param bin the selected bin model
+   */
+  binClicked?: (bin: Bin) => void
 }
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -82,7 +87,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 export default function BinyardDisplay(props: Props) {
-  const { yardKey, insert } = props;
+  const { yardKey, insert, binClicked } = props;
   const classes = useStyles();
   const binAPI = useBinAPI();
   const theme = useTheme();
@@ -321,6 +326,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={grainBins}
                   duplicateBin={duplicateBin}
                   title={"Grain Bins"}
+                  cardClickFunction={binClicked}
                 />
               </Grid>
             </React.Fragment>
@@ -338,6 +344,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={fertBins}
                   duplicateBin={duplicateBin}
                   title={"Fertilizer Bins"}
+                  cardClickFunction={binClicked}
                 />
               </Grid>
             </React.Fragment>
@@ -355,6 +362,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={emptyBins}
                   duplicateBin={duplicateBin}
                   title={"Empty Bins"}
+                  cardClickFunction={binClicked}
                   // loadMore={newTranslation => {
                   //   //only triggered in the scroll view so this will never trigger in grid view
                   //   if (yardBins.length < binTotal) {
diff --git a/src/maps/mapDrawers/BinYardDrawer.tsx b/src/maps/mapDrawers/BinYardDrawer.tsx
index 3153901..e347014 100644
--- a/src/maps/mapDrawers/BinYardDrawer.tsx
+++ b/src/maps/mapDrawers/BinYardDrawer.tsx
@@ -1,6 +1,7 @@
 import BinyardDisplay from "bin/BinyardDisplay";
 import DisplayDrawer from "common/DisplayDrawer";
 import MapMarkerSettings from "maps/MapMarkerSettings";
+import { Bin } from "models";
 //import Bins from "pages/Bins";
 import { pond } from "protobuf-ts/pond";
 import { useBinYardAPI, useGlobalState, useSnackbar } from "providers";
@@ -14,10 +15,11 @@ interface Props {
   removeMarker: (key: string) => void;
   updateMarker: (key: string, objectSettings: pond.BinYardSettings) => void;
   moveMap: (long: number, lat: number) => void;
+  binClicked: (bin: Bin) => void
 }
 
 export default function BinYardDrawer(props: Props) {
-  const { open, onClose, selectedYard, yards, removeMarker, updateMarker, moveMap } = props;
+  const { open, onClose, selectedYard, yards, removeMarker, updateMarker, moveMap, binClicked } = props;
   const [{as}] = useGlobalState();
   const [yard, setYard] = useState<pond.BinYardSettings>(pond.BinYardSettings.create());
   const [openMarkerSettings, setOpenMarkerSettings] = useState(false);
@@ -85,7 +87,12 @@ export default function BinYardDrawer(props: Props) {
 
   const drawerBody = () => {
     //return <Bins insert yardFilter={yard.key} />;
-    return <BinyardDisplay insert yardKey={yard.key} />;
+    return (
+      <BinyardDisplay 
+        insert 
+        yardKey={yard.key} 
+        binClicked={binClicked}/>
+    )
   };
 
   /**
diff --git a/src/maps/mapObjectControllers/AgMapController.tsx b/src/maps/mapObjectControllers/AgMapController.tsx
index 752992d..71e91a5 100644
--- a/src/maps/mapObjectControllers/AgMapController.tsx
+++ b/src/maps/mapObjectControllers/AgMapController.tsx
@@ -1659,6 +1659,18 @@ import { Result } from "@mapbox/mapbox-gl-geocoder";
           <React.Fragment>
             <BinYardDrawer
               open={yardDrawer}
+              binClicked={(bin) => {
+                //move the map to the correct bin location, assuming the bin was plotted on the map
+                let location = bin.location()
+                if(location !== null && location !== undefined){
+                  moveMap(location.latitude, location.longitude, zoomLevels.close, isMobile)
+                }
+                //close the yarddrawer
+                setYardDrawer(false)
+                //open the bin drawer using the correct bin
+                setObjectKey(bin.key())
+                setBinDrawer(true)
+              }}
               onClose={() => {
                 if (new Date().valueOf() > endTime) {
                   setYardDrawer(false);