diff --git a/taxonium_component/src/Deck.jsx b/taxonium_component/src/Deck.jsx
index 7cffe87e..b7ad9529 100644
--- a/taxonium_component/src/Deck.jsx
+++ b/taxonium_component/src/Deck.jsx
@@ -50,6 +50,7 @@ function Deck({
   const [deckSettingsOpen, setDeckSettingsOpen] = useState(false);
   const [colorSettingOpen, setColorSettingOpen] = useState(false);
   const [currentColorSettingKey, setCurrentColorSettingKey] = useState("a");
+  const [hoveredKey, setHoveredKey] = useState(null);
   const [treenomeSettingsOpen, setTreenomeSettingsOpen] = useState(false);
 
   //console.log("DATA is ", data);
@@ -191,6 +192,8 @@ function Deck({
     treenomeState,
     treenomeReferenceInfo,
     setTreenomeReferenceInfo,
+    hoveredKey,
+    
   });
   // console.log("deck refresh");
 
@@ -301,6 +304,8 @@ function Deck({
         config={config}
         setCurrentColorSettingKey={setCurrentColorSettingKey}
         setColorSettingOpen={setColorSettingOpen}
+        hoveredKey={hoveredKey}
+        setHoveredKey={setHoveredKey}
       />
       <DeckButtons
         // we want this to intercept all mouse events
diff --git a/taxonium_component/src/components/Key.jsx b/taxonium_component/src/components/Key.jsx
index dc6b07fa..2b54486c 100644
--- a/taxonium_component/src/components/Key.jsx
+++ b/taxonium_component/src/components/Key.jsx
@@ -9,6 +9,8 @@ const Key = ({
   config,
   setCurrentColorSettingKey,
   setColorSettingOpen,
+  hoveredKey,
+  setHoveredKey,
 }) => {
   const numLegendEntries = 10;
   const [collapsed, setCollapsed] = useState(window.innerWidth < 800);
@@ -32,7 +34,9 @@ const Key = ({
         collapsed ? "w-20" : "w-32"
       )}
       // z index big
-      style={{ zIndex: 1000 }}
+      style={{ zIndex: 10 ,
+      
+    cursor:'default'}}
     >
       <h3
         className="font-bold text-gray-600 text-xs cursor-pointer"
@@ -58,15 +62,26 @@ const Key = ({
               <div
                 className="key-text text-xs text-gray-700 mt-0.5 break-all cursor-pointer"
                 key={index}
+                style={{
+                  pointerEvents: 'auto'
+                }
+              }
                 onClick={() => {
                   setCurrentColorSettingKey(item.value);
                   setColorSettingOpen(true);
                 }}
+                onMouseEnter={() =>{
+                  setHoveredKey(item.value)
+                  
+                }
+                }
+                onMouseLeave={() => setHoveredKey(null)}
+
                 title="Edit color"
               >
                 <div
                   style={{ backgroundColor: color }}
-                  className="circle w-2 h-2 mr-2 rounded-full inline-block transform transition-transform hover:scale-150"
+                  className={`circle w-2 h-2 mr-2 rounded-full inline-block transform transition-transform ${hoveredKey === item.value ? "scale-150" : "scale-100" }`}
                 />
                 {item.value}
               </div>
diff --git a/taxonium_component/src/hooks/useLayers.jsx b/taxonium_component/src/hooks/useLayers.jsx
index 0fc8052d..8980786e 100644
--- a/taxonium_component/src/hooks/useLayers.jsx
+++ b/taxonium_component/src/hooks/useLayers.jsx
@@ -44,6 +44,7 @@ const useLayers = ({
   treenomeState,
   treenomeReferenceInfo,
   setTreenomeReferenceInfo,
+  hoveredKey
 }) => {
   const lineColor = settings.lineColor;
   const getNodeColorField = colorBy.getNodeColorField;
@@ -158,7 +159,7 @@ const useLayers = ({
     getFillColor: (d) => toRGB(getNodeColorField(d, detailed_data)),
 
     // radius in pixels
-    getRadius: 3,
+    getRadius: (d) => getNodeColorField(d, detailed_data) === hoveredKey ? 4 : 3,
     getLineColor: [100, 100, 100],
     opacity: 0.6,
     stroked: data.data.nodes && data.data.nodes.length < 3000,
@@ -170,6 +171,7 @@ const useLayers = ({
     modelMatrix: modelMatrix,
     updateTriggers: {
       getFillColor: [detailed_data, getNodeColorField, colorHook],
+      getRadius:[hoveredKey,getNodeColorField],
       getPosition: [xType],
     },
   };