diff --git a/packages/portal/src/components/media/MediaAnnotationList.vue b/packages/portal/src/components/media/MediaAnnotationList.vue
index 3b163b0313..b587321614 100644
--- a/packages/portal/src/components/media/MediaAnnotationList.vue
+++ b/packages/portal/src/components/media/MediaAnnotationList.vue
@@ -20,7 +20,7 @@
         ref="annotationListItems"
         :lang="anno.body.language"
         class="list-group-item list-group-item-action"
-        :class="{ active: anno.id === activeAnnotation?.id }"
+        :class="{ active: anno.id === activeAnnotation?.id, hover: anno.id === hoveredAnnotation?.id }"
         data-qa="annotation list item"
       >
         <!--
@@ -84,6 +84,7 @@
         annotationSearchResults,
         annotationUri,
         fetchCanvasAnnotations,
+        hoveredAnnotation,
         pageForAnnotationTarget,
         searchAnnotations,
         setActiveAnnotation
@@ -97,6 +98,7 @@
         annotationSearchResults,
         annotationUri,
         fetchCanvasAnnotations,
+        hoveredAnnotation,
         pageForAnnotationTarget,
         scrollElementToCentre,
         searchAnnotations,
@@ -216,6 +218,10 @@
         background-color: transparent;
       }
 
+      &.hover {
+        border: 1px solid $mediumgrey;
+      }
+
       &.active {
         background-color: transparent;
         border: 1px solid $blue;
diff --git a/packages/portal/src/components/media/MediaAnnotationSearch.vue b/packages/portal/src/components/media/MediaAnnotationSearch.vue
index ea1cde9526..49e644005f 100644
--- a/packages/portal/src/components/media/MediaAnnotationSearch.vue
+++ b/packages/portal/src/components/media/MediaAnnotationSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="position-relative">
     <b-form
       id="media-annotation-search-form"
       class="search-form position-relative"
@@ -10,6 +10,7 @@
       <b-form-group>
         <b-form-input
           id="media-annotation-search-query"
+          ref="searchinput"
           v-model="query"
           :placeholder="$t('media.sidebar.searchPlaceholder')"
           name="query"
@@ -19,6 +20,16 @@
         />
       </b-form-group>
     </b-form>
+    <b-button
+      v-show="query"
+      data-qa="clear button"
+      class="clear-button icon-only"
+      variant="light"
+      :aria-label="$t('actions.clear')"
+      @click="clearQuery"
+    >
+      <span class="icon-clear" />
+    </b-button>
     <MediaAnnotationList
       v-if="annoQuery"
       :active="active"
@@ -28,6 +39,7 @@
 </template>
 
 <script>
+  import useItemMediaPresentation from '@/composables/itemMediaPresentation.js';
   import MediaAnnotationList from './MediaAnnotationList.vue';
 
   export default {
@@ -44,6 +56,16 @@
       }
     },
 
+    setup() {
+      const {
+        searchAnnotations
+      } = useItemMediaPresentation();
+
+      return {
+        searchAnnotations
+      };
+    },
+
     data() {
       return {
         annoQuery: this.$route.query.fulltext || null,
@@ -60,6 +82,15 @@
     methods: {
       handleSubmitForm() {
         this.$router.push({ ...this.$route, query: { ...this.$route.query, fulltext: this.query } });
+      },
+
+      clearQuery() {
+        this.query = null;
+        this.searchAnnotations(null);
+        this.handleSubmitForm();
+        this.$nextTick(() => {
+          this.$refs.searchinput.$el.focus();
+        });
       }
     }
   };
@@ -85,7 +116,35 @@
 
     .form-control {
       padding: 0.75rem;
-      border-radius: 0.5rem
+      border-radius: 0.5rem;
+      box-shadow: 0 0 0px 1000px $white inset !important; // override webkit search input style
+    }
+
+    input[type='search']::-webkit-search-decoration,
+    input[type='search']::-webkit-search-cancel-button {
+      appearance: none;
+    }
+
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus {
+      -webkit-text-fill-color: $mediumgrey;
+      -webkit-box-shadow: 0 0 0px 1000px $white inset;
+    }
+  }
+
+  .clear-button {
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0.625rem;
+    right: 1.25rem;
+    padding: 0.5rem;
+
+    .icon-clear {
+      font-size: $font-size-small;
     }
   }
 </style>
diff --git a/packages/portal/src/components/media/MediaImageViewer.vue b/packages/portal/src/components/media/MediaImageViewer.vue
index 21d4ee980a..629ac9ded0 100644
--- a/packages/portal/src/components/media/MediaImageViewer.vue
+++ b/packages/portal/src/components/media/MediaImageViewer.vue
@@ -61,6 +61,8 @@
   import View from 'ol/View.js';
   import { easeOut } from 'ol/easing.js';
   import { defaults } from 'ol/interaction/defaults';
+  import Style from 'ol/style/Style.js';
+  import Stroke from 'ol/style/Stroke.js';
 
   import useItemMediaPresentation from '@/composables/itemMediaPresentation.js';
   import useRotation from '@/composables/rotation.js';
@@ -132,20 +134,26 @@
       const {
         activeAnnotation,
         annotationAtCoordinate,
+        annotationSearchResults,
         hasAnnotations,
+        hoveredAnnotation,
+        setHoveredAnnotation,
         pageForAnnotationTarget
       } = useItemMediaPresentation();
 
       return {
         activeAnnotation,
         annotationAtCoordinate,
+        annotationSearchResults,
         currentZoom,
         hasAnnotations,
+        hoveredAnnotation,
         pageForAnnotationTarget,
         resetRotation,
         rotation,
         setCurrentZoom,
         setDefaultZoom,
+        setHoveredAnnotation,
         setMaxZoom,
         setMinZoom
       };
@@ -186,7 +194,15 @@
     watch: {
       activeAnnotation: {
         deep: true,
-        handler: 'highlightAnnotation'
+        handler() {
+          this.highlightAnnotations();
+        }
+      },
+      annotationSearchResults: {
+        deep: true,
+        handler() {
+          this.highlightAnnotations(this.annotationSearchResults, 'search');
+        }
       },
       currentZoom: 'setZoom',
       rotation: 'setRotation',
@@ -206,18 +222,8 @@
         }
       },
 
-      initOlAnnotationLayer() {
-        const layerCount = this.olMap.getLayers().getLength();
-        if (layerCount === 0) {
-          throw new MediaImageViewerError('No image layer to annotate');
-        }
-        if (layerCount === 1) {
-          this.olMap.addLayer(new VectorLayer({ source: new VectorSource() }));
-        }
-      },
-
-      constructAnnotationFeature() {
-        let annotation = this.activeAnnotation;
+      constructAnnotationFeature(anno) {
+        let annotation = anno;
         if (!annotation) {
           return null;
         } else if (!(annotation instanceof EuropeanaMediaAnnotation)) {
@@ -266,22 +272,45 @@
         }
       },
 
-      async highlightAnnotation() {
+      handlePointerMove(event) {
         if (!this.fullImageRendered) {
-          await this.renderFullImage();
+          return;
         }
 
-        this.initOlAnnotationLayer();
+        this.olMap.un('pointermove', this.handlePointerMove);
 
-        const layer = this.olMap.getLayers().item(1);
+        const anno = this.annotationAtCoordinate(this.olMap.getCoordinateFromPixel(event.pixel), this.olExtent);
+        if (!this.hoveredAnnotation || (anno?.id !== this.hoveredAnnotation?.id)) {
+          this.highlightAnnotations(anno, 'hover');
+          this.setHoveredAnnotation(anno);
+        }
+
+        setTimeout(() => {
+          this.olMap.on('pointermove', this.handlePointerMove);
+        }, 50);
+      },
+
+      async highlightAnnotations(annos = this.activeAnnotation, layerId = 'active') {
+        if (!this.fullImageRendered) {
+          await this.renderFullImage();
+        }
+
+        const layer = this.olMap.getLayers().getArray().find((layer) => layer.get('id') === layerId);
+        if (!layer) {
+          return;
+        }
 
         // remove any existing features, i.e. previously highlighted annotations
+        // TODO: be more selective here, i.e. don't remove then re-highlight the
+        //       same anno e.g.
         layer.getSource().clear();
 
-        const feature = this.constructAnnotationFeature();
+        for (const anno of [].concat(annos)) {
+          const feature = this.constructAnnotationFeature(anno);
 
-        if (feature) {
-          layer.getSource().addFeature(feature);
+          if (feature) {
+            layer.getSource().addFeature(feature);
+          }
         }
       },
 
@@ -294,7 +323,80 @@
         this.$emit('error', error);
       },
 
-      initOlMap({ extent, layer, source } = {}) {
+      initOlAnnotationLayers() {
+        const layerCount = this.olMap.getLayers().getLength();
+
+        if (layerCount === 0) {
+          throw new MediaImageViewerError('No image layer to annotate');
+        }
+
+        if (layerCount === 1) {
+          // layer for annotations from search
+          this.olMap.addLayer(new VectorLayer({
+            properties: { id: 'search' },
+            source: new VectorSource(),
+            style: new Style({
+              stroke: new Stroke({
+                color: '#ffcb56'
+              })
+            })
+          }));
+
+          // layer for hovered annotation
+          this.olMap.addLayer(new VectorLayer({
+            properties: { id: 'hover' },
+            source: new VectorSource(),
+            style: new Style({
+              stroke: new Stroke({
+                color: '#4d4d4d'
+              })
+            })
+          }));
+
+          // layer for active annotation
+          this.olMap.addLayer(new VectorLayer({
+            properties: { id: 'active' },
+            source: new VectorSource()
+          }));
+
+          this.$nextTick(() => {
+            this.highlightAnnotations();
+            this.highlightAnnotations(this.annotationSearchResults, 'search');
+          });
+        }
+      },
+
+      initOl({ extent, layer, source } = {}) {
+        this.olExtent = extent;
+        this.initOlMap();
+        this.initOlView({ extent, layer, source });
+        if (this.hasAnnotations) {
+          this.initOlAnnotationLayers();
+        }
+      },
+
+      initOlMap() {
+        if (this.olMap) {
+          return;
+        }
+
+        this.olMap = new Map({
+          controls: [],
+          interactions: defaults({ mouseWheelZoom: false }),
+          target: 'media-image-viewer',
+          keyboardEventTarget: 'media-image-viewer-keyboard-toggle'
+        });
+        this.olMap.on('error', (olError) => this.handleOlError(olError, 'OpenLayers Map error'));
+        if (this.hasAnnotations) {
+          this.olMap.on('click', (event) => {
+            this.handleMapClick(event.coordinate);
+          });
+          // TODO: this fires many times... debounce it?
+          this.olMap.on('pointermove', this.handlePointerMove);
+        }
+      },
+
+      initOlView({ extent, layer, source } = {}) {
         const projection = new Projection({ units: 'pixels', extent });
 
         this.resetRotation();
@@ -308,22 +410,6 @@
         });
         view.on('error', (olError) => this.handleOlError(olError, 'OpenLayers View error'));
 
-        if (!this.olMap) {
-          this.olMap = new Map({
-            controls: [],
-            interactions: defaults({ mouseWheelZoom: false }),
-            target: 'media-image-viewer',
-            keyboardEventTarget: 'media-image-viewer-keyboard-toggle'
-          });
-          this.olMap.on('error', (olError) => this.handleOlError(olError, 'OpenLayers Map error'));
-          if (this.hasAnnotations) {
-            this.olMap.on('click', (evt) => {
-              this.handleMapClick(evt.coordinate);
-            });
-          }
-        }
-        this.olExtent = extent;
-
         this.olMap.setLayers([layer]);
         this.olMap.setView(view);
 
@@ -349,7 +435,7 @@
 
         mapOptions = await this.initOlImageLayerStatic(this.thumbnail, thumbWidth, thumbHeight);
 
-        this.initOlMap(mapOptions);
+        this.initOl(mapOptions);
         this.olMap.getInteractions().forEach((interaction) => interaction.setActive(false));
 
         this.olMap.on('click', this.renderFullImage);
@@ -394,7 +480,7 @@
         source.on('tileloadstart', () => this.imageLoading = true);
         source.on('tileloaderror', (olError) => this.handleOlError(olError, 'OpenLayers IIIF Source tileloaderror'));
         source.on('tileloadend', () => this.imageLoading = false);
-        const layer = new TileLayer({ source });
+        const layer = new TileLayer({ properties: { id: 'image' }, source });
         layer.on('error', (olError) => this.handleOlError(olError, 'OpenLayers Tile Layer error'));
 
         return { extent, layer, source };
@@ -413,7 +499,7 @@
         source.on('imageloadstart', () => this.imageLoading = true);
         source.on('imageloaderror', (olError) => this.handleOlError(olError, 'OpenLayers Static Source imageloaderror'));
         source.on('imageloadend', () => this.imageLoading = false);
-        const layer = new ImageLayer({ source });
+        const layer = new ImageLayer({ properties: { id: 'image' }, source });
         layer.on('error', (olError) => this.handleOlError(olError, 'OpenLayers Image Layer error'));
 
         return { extent, layer, source };
@@ -425,7 +511,7 @@
         if (this.source === 'IIIF') {
           const mapOptions = this.initOlImageLayerIIIF();
           this.initMapWithFullImage(mapOptions);
-        } else if (this.activeAnnotation) {
+        } else if (this.activeAnnotation || ((this.annotationSearchResults || []).length > 0)) {
           this.renderFullImage();
         } else {
           this.renderThumbnail();
@@ -433,9 +519,8 @@
       },
 
       initMapWithFullImage(mapOptions) {
-        this.initOlMap(mapOptions);
+        this.initOl(mapOptions);
         this.fullImageRendered = true;
-        this.highlightAnnotation();
       },
 
       setRotation() {
diff --git a/packages/portal/src/composables/itemMediaPresentation.js b/packages/portal/src/composables/itemMediaPresentation.js
index 45fa332812..fac83e8d42 100644
--- a/packages/portal/src/composables/itemMediaPresentation.js
+++ b/packages/portal/src/composables/itemMediaPresentation.js
@@ -10,6 +10,7 @@ const annotationSearchResults = ref([]);
 const activeAnnotation = ref(null);
 const page = ref(1);
 const presentation = ref(null);
+const hoveredAnnotation = ref(null);
 
 const annotationAtCoordinate  = (coordinate, fullExtent) => {
   const coordinateToCompare = [coordinate[0], fullExtent[3] - coordinate[1]];
@@ -150,15 +151,24 @@ const pageForAnnotationTarget = (annoTarget) => {
 };
 
 const searchAnnotations = async(query) => {
-  const list = await fetchAnnotations(searchServiceUri.value, { params: { query } });
-  annotationSearchResults.value = list.items;
-  annotationSearchHits.value = list.hits || [];
+  if (query === null) {
+    annotationSearchResults.value = [];
+    annotationSearchHits.value = [];
+  } else {
+    const list = await fetchAnnotations(searchServiceUri.value, { params: { query } });
+    annotationSearchResults.value = list.items;
+    annotationSearchHits.value = list.hits || [];
+  }
 };
 
 const setActiveAnnotation = (active) => {
   activeAnnotation.value = active;
 };
 
+const setHoveredAnnotation = (hovered) => {
+  hoveredAnnotation.value = hovered;
+};
+
 const setPage = (value) => {
   page.value = Number(value) || 1;
 };
@@ -181,6 +191,7 @@ export default function useItemMediaPresentation() {
     fetchPresentation,
     hasAnnotations,
     hasSearchService,
+    hoveredAnnotation,
     page,
     pageForAnnotationTarget,
     resource,
@@ -190,6 +201,7 @@ export default function useItemMediaPresentation() {
     searchAnnotations,
     searchServiceUri,
     setActiveAnnotation,
+    setHoveredAnnotation,
     setPage,
     setPresentationFromWebResources
   };
diff --git a/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js b/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js
index 984b7b7791..cc6b64dbf8 100644
--- a/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js
+++ b/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js
@@ -163,28 +163,33 @@ describe('components/media/MediaImageViewer', () => {
   });
 
   describe('methods', () => {
-    describe('highlightAnnotation', () => {
+    describe('highlightAnnotations', () => {
       describe('when the full image is not yet rendered', () => {
         it('renders the full image', async() => {
           const wrapper = factory({ propsData: { url, width, height } });
 
-          await wrapper.vm.highlightAnnotation();
+          await wrapper.vm.highlightAnnotations();
 
           expect(wrapper.vm.fullImageRendered).toBe(true);
         });
       });
-      it('initialises a vector layer for annotations', async() => {
+
+      it('initialises multiple vector layers for annotations', async() => {
         const annotation = {
           target: {
             id: url
           }
         };
-        const wrapper = factory({ propsData: { url, annotation, width, height } });
+        stubItemMediaPresentationComposable({ activeAnnotation: annotation, hasAnnotations: true });
+        const wrapper = factory({ propsData: { url, width, height } });
 
         await new Promise(process.nextTick);
-        wrapper.vm.highlightAnnotation();
+        wrapper.vm.highlightAnnotations();
 
-        expect(wrapper.vm.olMap.getLayers().getLength()).toBe(2);
+        expect(wrapper.vm.olMap.getLayers().getLength()).toBe(4);
+        expect(wrapper.vm.olMap.getLayers().item(1).get('id')).toBe('search');
+        expect(wrapper.vm.olMap.getLayers().item(2).get('id')).toBe('hover');
+        expect(wrapper.vm.olMap.getLayers().item(3).get('id')).toBe('active');
       });
 
       describe('when annotation has no xywh co-ordinates', () => {
@@ -195,12 +200,12 @@ describe('components/media/MediaImageViewer', () => {
         };
 
         it('adds a feature for the annotation at the full image size', async() => {
-          stubItemMediaPresentationComposable({ activeAnnotation: annotation });
+          stubItemMediaPresentationComposable({ activeAnnotation: annotation, hasAnnotations: true });
           const wrapper = factory({ propsData: { url, width, height } });
 
           await new Promise(process.nextTick);
-          wrapper.vm.highlightAnnotation();
-          const source = wrapper.vm.olMap.getLayers().item(1).getSource();
+          wrapper.vm.highlightAnnotations();
+          const source = wrapper.vm.olMap.getLayers().pop().getSource();
 
           expect(source.getFeatures()[0].getGeometry().flatCoordinates).toEqual([
             0, 400, 0, 0, 100, 0, 100, 400, 0, 400
@@ -217,12 +222,12 @@ describe('components/media/MediaImageViewer', () => {
         };
 
         it('adds a feature for the annotation at its xywh co-ordinates', async() => {
-          stubItemMediaPresentationComposable({ activeAnnotation: annotation });
+          stubItemMediaPresentationComposable({ activeAnnotation: annotation, hasAnnotations: true });
           const wrapper = factory({ propsData: { url, width, height } });
 
           await new Promise(process.nextTick);
-          wrapper.vm.highlightAnnotation();
-          const source = wrapper.vm.olMap.getLayers().item(1).getSource();
+          wrapper.vm.highlightAnnotations();
+          const source = wrapper.vm.olMap.getLayers().pop().getSource();
 
           expect(source.getFeatures()[0].getGeometry().flatCoordinates).toEqual([
             0, 400, 0, 380, 40, 380, 40, 400, 0, 400