diff --git a/src/bin/BinYards.tsx b/src/bin/BinYards.tsx
index fed79eb..7ef7d1c 100644
--- a/src/bin/BinYards.tsx
+++ b/src/bin/BinYards.tsx
@@ -211,12 +211,6 @@ export default function BinYard(props: Props) {
     }
   }, [props.yards, props.yardPerms]);
 
-  // useEffect(() => {
-  //   if (props.tab && binYards.length > 1) {
-  //     setYardFilter(binYards[props.tab - 1].key);
-  //   }
-  // }, [props.tab, binYards, setYardFilter, loadYards]);
-
   const tabChange = (i: number) => {
     if (tab === i) return;
     if (i === binYards.length + 2) return;
@@ -687,43 +681,68 @@ export default function BinYard(props: Props) {
         value={tab}
         TabIndicatorProps={{ style: { background: "rgba(0,0,0,0)" } }}
         onChange={(_, newValue) => {
-          if (+newValue > 0) {
+          // if (+newValue > 0) {
             tabChange(newValue);
-          }
-        }}>
-        <Tab
-          className={searchSelected ? classes.searchTabExpanded : classes.searchTab}
-          disableTouchRipple
-          disableFocusRipple
-          draggable={false}
-          label={
-            <Grid container direction="row" wrap="nowrap" spacing={2}>
-              <Grid>{yardsLoading ? <CircularProgress size={20} /> : <Search />}</Grid>
-              {searchSelected && (
-                <Grid>
-                  <TextField
-                    onChange={e => {
-                      loadYards(e.target.value);
-                    }}
-                  />
+          // }
+        }}
+        startNode={
+          <>
+            <Tab
+              className={searchSelected ? classes.searchTabExpanded : classes.searchTab}
+              disableTouchRipple
+              disableFocusRipple
+              draggable={false}
+              label={
+                <Grid container direction="row" wrap="nowrap" spacing={2}>
+                  <Grid>{yardsLoading ? <CircularProgress size={20} /> : <Search />}</Grid>
+                  {searchSelected && (
+                    <Grid>
+                      <TextField
+                        onChange={e => {
+                          loadYards(e.target.value);
+                        }}
+                      />
+                    </Grid>
+                  )}
                 </Grid>
-              )}
-            </Grid>
-          }
-          onClick={_e => {
-            setSearchSelected(true);
-          }}
-        />
-        <Tab
-          classes={{ root: classes.smallTab, selected: classes.selectedTab }}
-          style={{ marginLeft: theme.spacing(1) }}
-          label="All"
-          draggable={false}
-          disableTouchRipple={true}
-          onClick={() => {
-            setShowing("all");
-          }}
-        />
+              }
+              onClick={_e => {
+                setSearchSelected(true);
+              }}
+            />
+            <Tab
+              classes={{ root: classes.smallTab, selected: classes.selectedTab }}
+              style={{ marginLeft: theme.spacing(1) }}
+              label="All"
+              draggable={false}
+              disableTouchRipple={true}
+              onClick={() => {
+                setShowing("all");
+              }}
+            />
+          </>
+        }
+        endNode={
+          <>
+            <Tab
+              classes={{ root: classes.smallTab, selected: classes.selectedTab }}
+              label={<AddIcon color="primary"/>}
+              onClick={() => setShowAddYard(true)}
+              disableTouchRipple={true}
+            />
+          </>
+        }
+      >
+        {/* <Tab
+            classes={{ root: classes.smallTab, selected: classes.selectedTab }}
+            style={{ marginLeft: theme.spacing(1) }}
+            label="All"
+            draggable={false}
+            disableTouchRipple={true}
+            onClick={() => {
+              setShowing("all");
+            }}
+          /> */}
         {binYards.map((n, index) => (
           <Tooltip
             title={
@@ -770,13 +789,7 @@ export default function BinYard(props: Props) {
             />
           </Tooltip>
         ))}
-        <Tab
-          classes={{ root: classes.smallTab, selected: classes.selectedTab }}
-          // fullWidth={false}
-          label={<AddIcon color="primary"/>}
-          onClick={() => setShowAddYard(true)}
-          disableTouchRipple={true}
-        />
+        
         {/* {grainBags.length > 0 && (
           <Tab
             classes={{ root: classes.smallTab, selected: classes.selectedTab }}
diff --git a/src/common/DraggableTabs.tsx b/src/common/DraggableTabs.tsx
index 8e42cb8..d33e4db 100644
--- a/src/common/DraggableTabs.tsx
+++ b/src/common/DraggableTabs.tsx
@@ -3,9 +3,33 @@ import React from "react";
 
 interface DraggableTabsProps extends TabsProps {
   children: React.ReactNode; 
+  startNode?: React.ReactNode;
+  endNode?: React.ReactNode;
 }
 
-export default function DraggableTabs({children, ...tabsProps}: DraggableTabsProps) {
+export default function DraggableTabs(props: DraggableTabsProps) {
+  const { startNode, endNode, children, ...tabsProps } = props
+
+  // Helper function to flatten nodes and assign keys
+  const flattenNodes = (nodes: React.ReactNode, prefix: string) =>
+    React.Children.toArray(nodes).flatMap((node, nodeIndex) => {
+      if (React.isValidElement(node) && (node.type as any) === React.Fragment) {
+        return React.Children.toArray(node.props.children).map((child, childIndex) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child, { key: `${prefix}-${nodeIndex}-${childIndex}` })
+            : child
+        );
+      }
+      return React.isValidElement(node)
+        ? React.cloneElement(node, { key: `${prefix}-${nodeIndex}` })
+        : node;
+    });
+
+  // Process startTabs
+  const startTabs = flattenNodes(startNode, "start");
+
+  // Process endTabs
+  const endTabs = flattenNodes(endNode, "end");
 
   const enhancedChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child) && child.type === Tab) {
@@ -21,11 +45,14 @@ export default function DraggableTabs({children, ...tabsProps}: DraggableTabsPro
     }
     // Return non-Tab children unchanged
     return child;
-  });
+  }) || [];
+
+  // Combine all tabs into a single array
+  const allTabs = [...startTabs, ...enhancedChildren, ...endTabs];
 
   return (
     <Tabs {...tabsProps}>
-      {enhancedChildren}
+      {allTabs}
     </Tabs>
   )
 }
\ No newline at end of file