diff --git a/src/bin/BinYards.tsx b/src/bin/BinYards.tsx
index ff582dd..242c9a1 100644
--- a/src/bin/BinYards.tsx
+++ b/src/bin/BinYards.tsx
@@ -126,10 +126,10 @@ const useStyles = makeStyles((theme: Theme) => {
       background: theme.palette.background.default,
           // "linear-gradient(rgba(150, 150, 150, 0.3)," 
           // + theme.palette.background.default + " 80%)"
-      // "&:hover": {
-      //   background:
-      //     "linear-gradient(rgba(150, 150, 150, 0.3)," + theme.palette.background.default + " 80%)"
-      // }
+      "&:hover": {
+        background:
+          "linear-gradient(rgba(150, 150, 150, 0.3)," + theme.palette.background.default + " 80%)"
+      }
     },
     icon: {
       display: "flex",
@@ -762,7 +762,6 @@ export default function BinYard(props: Props) {
             <Tab
               classes={{ root: classes.tab, selected: classes.selectedTab }}
               key={index}
-              draggable
               sx={{ 
                 textAlign: "left",
               }}
diff --git a/src/common/DraggableTabs.tsx b/src/common/DraggableTabs.tsx
index d33e4db..abc6fc3 100644
--- a/src/common/DraggableTabs.tsx
+++ b/src/common/DraggableTabs.tsx
@@ -1,16 +1,27 @@
 import { Tab, Tabs, TabsProps } from "@mui/material";
-import React from "react";
+import React, { useEffect, useState, useRef } from "react";
 
 interface DraggableTabsProps extends TabsProps {
-  children: React.ReactNode; 
+  children: React.ReactNode;
   startNode?: React.ReactNode;
   endNode?: React.ReactNode;
 }
 
 export default function DraggableTabs(props: DraggableTabsProps) {
-  const { startNode, endNode, children, ...tabsProps } = props
+  const { startNode, endNode, children, ...tabsProps } = props;
+
+  const initialChildren = React.Children.toArray(children);
+  const [tabOrder, setTabOrder] = useState<number[]>([]);
+  const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // Track hovered tab
+  const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab
+
+  useEffect(() => {
+    const newOrder = initialChildren.map((_, index) => index);
+    console.log("Children updated. New tabOrder:", newOrder);
+    setTabOrder(newOrder);
+    tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs
+  }, [initialChildren.length]);
 
-  // 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) {
@@ -25,34 +36,83 @@ export default function DraggableTabs(props: DraggableTabsProps) {
         : 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) {
-      if (child.props.draggable === undefined || child.props.draggable === true) {
-        return React.cloneElement(child, {
-          ...child.props,
-          draggable: true,
-          // onDragStart: (e: React.DragEvent<HTMLDivElement>) => handleDragStart(e, index),
-          onDragOver: (e: React.DragEvent<HTMLDivElement>) => e.preventDefault(),
-          // onDrop: (e: React.DragEvent<HTMLDivElement>) => handleDrop(e, index),
-        });
-      }
+  const handleDragStart = (e: React.DragEvent<HTMLDivElement>, index: number) => {
+    console.log("Drag started at index:", index);
+    e.dataTransfer.setData("text/plain", index.toString());
+    e.dataTransfer.effectAllowed = "move";
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>, index: number) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setHoveredIndex(index); // Update hovered index
+    console.log("Dragging over index:", index);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const draggedIndex = Number(e.dataTransfer.getData("text/plain"));
+    const dropIndex = hoveredIndex; // Use the last hovered index
+
+    console.log("Dragged from index:", draggedIndex);
+    console.log("Dropped at index:", dropIndex);
+    console.log("Current tabOrder before:", tabOrder);
+
+    if (dropIndex === -1) {
+      console.log("Drop skipped: no valid drop target");
+      return;
+    }
+
+    if (draggedIndex !== dropIndex && draggedIndex >= 0 && dropIndex >= 0 && draggedIndex < tabOrder.length && dropIndex < tabOrder.length) {
+      const newOrder = [...tabOrder];
+      const [draggedItem] = newOrder.splice(draggedIndex, 1);
+      newOrder.splice(dropIndex, 0, draggedItem);
+      console.log("New tabOrder after:", newOrder);
+      setTabOrder(newOrder);
+    } else {
+      console.log("Drop skipped: invalid indices or same position");
+    }
+    setHoveredIndex(-1); // Reset hovered index
+  };
+
+  const handleDragEnd = (e: React.DragEvent<HTMLDivElement>) => {
+    console.log("Drag ended");
+    setHoveredIndex(-1); // Reset on drag end
+  };
+
+  const enhancedChildren = React.Children.map(initialChildren, (child, originalIndex) => {
+    if (React.isValidElement(child)) {
+      const currentIndex = tabOrder.indexOf(originalIndex);
+      console.log("Original index:", originalIndex, "Current index:", currentIndex);
+      return (
+        <div
+          ref={(el) => (tabRefs.current[currentIndex] = el)} // Assign ref to each tab
+          draggable
+          onDragStart={(e) => handleDragStart(e, currentIndex)}
+          onDragOver={(e) => handleDragOver(e, currentIndex)}
+          onDrop={handleDrop} // Handle drop on individual tabs
+          onDragEnd={handleDragEnd}
+        >
+          {React.cloneElement(child)}
+        </div>
+      );
     }
-    // Return non-Tab children unchanged
     return child;
   }) || [];
 
-  // Combine all tabs into a single array
-  const allTabs = [...startTabs, ...enhancedChildren, ...endTabs];
+  useEffect(() => {
+    console.log(hoveredIndex)
+  }, [hoveredIndex])
 
-  return (
-    <Tabs {...tabsProps}>
-      {allTabs}
-    </Tabs>
-  )
+  const orderedChildren = tabOrder.map((index) => enhancedChildren[index]);
+  const allTabs = [...startTabs, ...orderedChildren, ...endTabs];
+
+  useEffect(() => {
+    console.log("Current tab order:", tabOrder);
+  }, [tabOrder]);
+
+  return <Tabs {...tabsProps}>{allTabs}</Tabs>;
 }
\ No newline at end of file
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 4997cfd..8ff818e 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -13,7 +13,7 @@ export function CreateTheme(themeType: "light" | "dark"): Theme {
 
 function generateBackgroundShades(themeType: "light" | "dark") {
   if(themeType==="light") return ({
-    default: "#e2e2e2",
+    default: "#e9e9e9",
     paper: "#fafafa",
   })