diff --git a/taxonium_component/src/Deck.jsx b/taxonium_component/src/Deck.jsx
index 10d1ca33..7bc54d8c 100644
--- a/taxonium_component/src/Deck.jsx
+++ b/taxonium_component/src/Deck.jsx
@@ -276,7 +276,48 @@ function Deck({
         }
         title = {currentColorSettingKey}
       />
-
+      <NodeHoverTip
+            hoverInfo={hoverInfo}
+            hoverDetails={hoverDetails}
+            colorHook={colorHook}
+            colorBy={colorBy}
+            config={config}
+            filterMutations={settings.filterMutations}
+            deckSize={deckSize}
+          />
+          <TreenomeMutationHoverTip
+            hoverInfo={hoverInfo}
+            hoverDetails={hoverDetails}
+            colorHook={colorHook}
+            colorBy={colorBy}
+            config={config}
+            treenomeReferenceInfo={treenomeReferenceInfo}
+          />
+          <MemoizedKey
+            keyStuff={keyStuff}
+            colorByField={colorBy.colorByField}
+            colorByGene={colorBy.colorByGene}
+            colorByPosition={colorBy.colorByPosition}
+            config={config}
+            setCurrentColorSettingKey={setCurrentColorSettingKey}
+            setColorSettingOpen={setColorSettingOpen}
+          
+          />
+          <DeckButtons
+          // we want this to intercept all mouse events
+          // so that we can prevent the default behavior
+          // of the browser
+            
+          
+            zoomReset={zoomReset}
+            zoomIncrement={zoomIncrement}
+            zoomAxis={zoomAxis}
+            setZoomAxis={setZoomAxis}
+            snapshot={snapshot}
+            loading={data.status === "loading"}
+            requestOpenSettings={() => setDeckSettingsOpen(true)}
+            settings={settings}
+          />
 
 
       <DeckGL
@@ -339,43 +380,7 @@ function Deck({
           />
         </View>
         <View id="main">
-          <NodeHoverTip
-            hoverInfo={hoverInfo}
-            hoverDetails={hoverDetails}
-            colorHook={colorHook}
-            colorBy={colorBy}
-            config={config}
-            filterMutations={settings.filterMutations}
-            deckSize={deckSize}
-          />
-          <TreenomeMutationHoverTip
-            hoverInfo={hoverInfo}
-            hoverDetails={hoverDetails}
-            colorHook={colorHook}
-            colorBy={colorBy}
-            config={config}
-            treenomeReferenceInfo={treenomeReferenceInfo}
-          />
-          <MemoizedKey
-            keyStuff={keyStuff}
-            colorByField={colorBy.colorByField}
-            colorByGene={colorBy.colorByGene}
-            colorByPosition={colorBy.colorByPosition}
-            config={config}
-            setCurrentColorSettingKey={setCurrentColorSettingKey}
-            setColorSettingOpen={setColorSettingOpen}
           
-          />
-          <DeckButtons
-            zoomReset={zoomReset}
-            zoomIncrement={zoomIncrement}
-            zoomAxis={zoomAxis}
-            setZoomAxis={setZoomAxis}
-            snapshot={snapshot}
-            loading={data.status === "loading"}
-            requestOpenSettings={() => setDeckSettingsOpen(true)}
-            settings={settings}
-          />
         </View>
       </DeckGL>
     </div>
diff --git a/taxonium_component/src/components/DeckButtons.jsx b/taxonium_component/src/components/DeckButtons.jsx
index ae7572f4..922eee88 100644
--- a/taxonium_component/src/components/DeckButtons.jsx
+++ b/taxonium_component/src/components/DeckButtons.jsx
@@ -19,6 +19,9 @@ const TaxButton = ({ children, onClick, title }) => {
       shadow-md "
       onClick={onClick}
       title={title}
+      style={{
+        pointerEvents: "auto",
+      }}
     >
       {children}
     </button>
@@ -42,7 +45,9 @@ export const DeckButtons = ({
         right: "0em",
         bottom: "0em",
         zIndex: 10,
+        pointerEvents: "none",
       }}
+
       className="flex flex-col items-end"
     >
       <div
@@ -63,6 +68,7 @@ export const DeckButtons = ({
       "
           style={{
             fontSize: ".7em",
+            pointerEvents: "auto",
             boxShadow: "0px -3px 4px  4px rgba(255, 255, 255, 1)",
           }}
         >
diff --git a/taxonium_component/src/components/Key.jsx b/taxonium_component/src/components/Key.jsx
index bb236dad..8d528db8 100644
--- a/taxonium_component/src/components/Key.jsx
+++ b/taxonium_component/src/components/Key.jsx
@@ -33,6 +33,8 @@ const Key = ({
         "px-2 border-right border  bg-white opacity-90 absolute bottom-2 left-2 pt-1 pb-2",
         collapsed ? "w-20" : "w-32"
       )}
+      // z index big
+      style={{ zIndex: 1000 }}
     >
       <h3
         className="font-bold text-gray-600 text-xs cursor-pointer"