diff --git a/src/components/presentational/ResultsAccessories.jsx b/src/components/presentational/ResultsAccessories.jsx
index ab83fac6c91a95185341081d2878c5b433020425..bfe761efe6be9aa0986f24d3391538656876e3e8 100644
--- a/src/components/presentational/ResultsAccessories.jsx
+++ b/src/components/presentational/ResultsAccessories.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Card, CardContent, CardActions, Skeleton, Chip, Stack} from "@mui/material";
+import { Card, CardContent, CardActions, Skeleton, Chip, Stack, CardActionArea} from "@mui/material";
 
 // icons
 import PreviewIcon from "@mui/icons-material/Preview";
@@ -101,23 +101,40 @@ export function FootprintCard(props){
     geoTiffViewer.openModal();
   };
 
+  const cardClick = () => {
+    window.postMessage(["zoomFootprint", props.feature], "*");
+  };
+
+  const cardHover = () => {
+    window.postMessage(["highlightFootprint", props.feature], "*");
+  };
+
+  const eraseHover = () => {
+    window.postMessage(["unhighlightFootprint"], "*");
+  };
+
+
+
+
   return(
     <Card sx={{ width: 250, margin: 1}}>
-      <CardContent sx={{padding: 1.2, paddingBottom: 0}}>
-        <div className="resultContainer" >
-          <div className="resultImgDiv">
-            <img className="resultImg" src={props.feature.assets.thumbnail.href} />
-          </div>
-          <div className="resultData">
-            <div className="resultSub">
-              <strong>ID:</strong>&nbsp;{props.feature.id}
+      <CardActionArea onMouseEnter={cardHover} onMouseLeave={eraseHover} onClick={cardClick}>
+        <CardContent sx={{padding: 1.2, paddingBottom: 0}}>
+          <div className="resultContainer" >
+            <div className="resultImgDiv">
+              <img className="resultImg" src={props.feature.assets.thumbnail.href} />
             </div>
-            <div className="resultSub">
-              <strong>Date:</strong>&nbsp;{props.feature.properties.datetime}
+            <div className="resultData">
+              <div className="resultSub">
+                <strong>ID:</strong>&nbsp;{props.feature.id}
+              </div>
+              <div className="resultSub">
+                <strong>Date:</strong>&nbsp;{props.feature.properties.datetime}
+              </div>
             </div>
           </div>
-        </div>
-      </CardContent>
+        </CardContent>
+      </CardActionArea>
       <CardActions>
         <div className="resultLinks">
           <Stack direction="row" spacing={1}>
diff --git a/src/js/AstroMap.js b/src/js/AstroMap.js
index 781dd8d81380a46737abbc1839d4a914244b39cb..a15f0bc1a525f5e804d533a9e8b0445accdca99e 100644
--- a/src/js/AstroMap.js
+++ b/src/js/AstroMap.js
@@ -50,6 +50,7 @@ export default L.Map.AstroMap = L.Map.extend({
     this._footprintControl = null;
     this._geoLayers = [];
     this._htmllegend = null;
+    this._hovHighlight = null;
 
     // Set by layer collection or baselayerchange event
     this._currentLayer = null;
@@ -141,6 +142,19 @@ export default L.Map.AstroMap = L.Map.extend({
         const collectionId = event.data[1];
         this.setVisibleCollections(collectionId);
       }
+      else if (event.data[0] === "zoomFootprint") {
+        const feature = event.data[1];
+        this.zoomFootprint(feature);
+      }
+      else if (event.data[0] === "highlightFootprint") {
+        const feature = event.data[1];
+        this.highlightFootprint(feature);
+      }
+      else if (event.data[0] === "unhighlightFootprint") {
+        if (this._hovHighlight) {
+          this._hovHighlight.remove();
+        }
+      }
     }
   },
 
@@ -175,6 +189,25 @@ export default L.Map.AstroMap = L.Map.extend({
     return clonedFeatures;
   },
 
+  zoomFootprint: function (feature) {
+    let zoomTarget = L.geoJSON(feature);
+    this.fitBounds(zoomTarget.getBounds());
+  },
+
+  highlightFootprint: function(feature){
+    
+    if(this._hovHighlight) {
+      this._hovHighlight.remove();
+    }
+
+    // Add Wrap?
+
+    // Add feature to (this) map
+    this._hovHighlight = L.geoJSON(feature, {
+      style: { fillColor: "#FFFFFF", color: "#FFFFFF" }
+    }).addTo(this);
+  },
+
   setVisibleCollections: function(collectionId){
     for(let i = 0; i < this._geoLayers.length; i++) {
       if(this._geoLayers[i]){