diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35767a094..820e59256 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Regression with dropdown (reverts fix for overflow bug in popup)
 - Fist selection on reviewer dashboard
 - Fixed caching on languages
+- Fixed rendering bugs with annotations
+- Fixed cache time bug in Firefox
+- Fixed vertical alignment of breadcrumbs
+
+### Changed
+- Updated react query to latest 2.x version (3.x is a breaking change)
 
 <!--
 ### Fixed
diff --git a/services/madoc-ts/package.json b/services/madoc-ts/package.json
index 51e6a49aa..f1b70e388 100644
--- a/services/madoc-ts/package.json
+++ b/services/madoc-ts/package.json
@@ -149,7 +149,7 @@
     "react-i18next": "^11.7.2",
     "react-intersection-observer": "^8.26.2",
     "react-mosaic-component": "^4.1.1",
-    "react-query": "^2.16.0",
+    "react-query": "^2.26.4",
     "react-router-config": "^5.1.1",
     "react-router-dom": "^5.1.2",
     "react-rte": "0.16.1",
diff --git a/services/madoc-ts/src/extensions/projects/templates/metadata-suggestions.tsx b/services/madoc-ts/src/extensions/projects/templates/metadata-suggestions.tsx
index dfd39ebce..e4a2c60d6 100644
--- a/services/madoc-ts/src/extensions/projects/templates/metadata-suggestions.tsx
+++ b/services/madoc-ts/src/extensions/projects/templates/metadata-suggestions.tsx
@@ -17,7 +17,6 @@ import { ProjectTemplate } from '../types';
 
 type MetadataSuggestionsOptions = {
   bulkMetadata: string;
-  allowCustomPairs: boolean;
 };
 
 export const metadataSuggestions: ProjectTemplate<MetadataSuggestionsOptions> = {
@@ -26,6 +25,28 @@ export const metadataSuggestions: ProjectTemplate<MetadataSuggestionsOptions> =
     label: 'Metadata suggestions',
     description: 'Crowd source the metadata for your canvases or manifests',
     version: '1.0.0',
+    thumbnail: `<svg width="109px" height="109px" viewBox="0 0 109 109" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-96.000000, -719.000000)">
+            <g transform="translate(96.000000, 719.000000)">
+                <rect stroke="#E7E9EC" stroke-width="2" x="1" y="1" width="107" height="107" rx="5"></rect>
+                <rect fill="#BFBFBF" x="17" y="15" width="28" height="3"></rect>
+                <rect fill="#E7E9EC" x="17" y="21" width="45" height="5"></rect>
+                <rect fill="#5B78E5" x="17" y="21" width="45" height="5"></rect>
+                <rect fill="#BFBFBF" x="17" y="32" width="28" height="3"></rect>
+                <rect fill="#E7E9EC" x="17" y="38" width="39" height="5"></rect>
+                <rect fill="#BFBFBF" x="17" y="49" width="28" height="3"></rect>
+                <rect fill="#E7E9EC" x="17" y="55" width="33" height="5"></rect>
+                <rect fill="#BFBFBF" x="17" y="66" width="28" height="3"></rect>
+                <rect fill="#BFBFBF" x="17" y="83" width="28" height="3"></rect>
+                <rect fill="#E7E9EC" x="17" y="72" width="41" height="5"></rect>
+                <rect fill="#E7E9EC" x="17" y="89" width="39" height="5"></rect>
+                <rect fill="#5B78E5" x="17" y="55" width="33" height="5"></rect>
+                <rect fill="#5B78E5" x="17" y="89" width="39" height="5"></rect>
+            </g>
+        </g>
+    </g>
+</svg>`,
   },
   captureModel: {
     document: captureModelShorthand({}),
@@ -104,10 +125,6 @@ export const metadataSuggestions: ProjectTemplate<MetadataSuggestionsOptions> =
         multiline: true,
         minLines: 10,
       } as Partial<TextFieldProps>,
-      allowCustomPairs: {
-        type: 'checkbox-field',
-        label: 'Populate existing metadata values',
-      },
     },
     modelPreview: function ModelPreview(options) {
       const doc = useMemo(() => {
@@ -132,7 +149,6 @@ export const metadataSuggestions: ProjectTemplate<MetadataSuggestionsOptions> =
     },
     defaults: {
       bulkMetadata: '',
-      allowCustomPairs: false,
     },
     async beforeForkDocument(doc: any, { options }) {
       if (options.bulkMetadata) {
@@ -141,18 +157,6 @@ export const metadataSuggestions: ProjectTemplate<MetadataSuggestionsOptions> =
           Object.assign(doc.properties, secondDoc.properties);
         }
       }
-
-      if (options.allowCustomPairs) {
-        const custom = captureModelShorthand({
-          label: { type: 'international-field', label: 'Label', value: [{ none: '' }] },
-          value: { type: 'international-field', label: 'Value', value: [{ none: '' }] },
-        });
-        custom.allowMultiple = true;
-        custom.label = 'Custom metadata';
-        custom.labelledBy = `{label} - {value}`;
-        doc.properties.customMetadata = [custom];
-      }
-
       return doc;
     },
   },
diff --git a/services/madoc-ts/src/frontend/admin/molecules/AnnotationStylePreview.tsx b/services/madoc-ts/src/frontend/admin/molecules/AnnotationStylePreview.tsx
index bc5e015d9..97a135b84 100644
--- a/services/madoc-ts/src/frontend/admin/molecules/AnnotationStylePreview.tsx
+++ b/services/madoc-ts/src/frontend/admin/molecules/AnnotationStylePreview.tsx
@@ -29,3 +29,27 @@ export function toStyle(style: any) {
 
   return css(style);
 }
+
+export const AnnotationStyleBigBackground = styled.div`
+  padding: 2em;
+  position: relative;
+  background: linear-gradient(
+    270deg,
+    rgba(255, 121, 0, 1) 13%,
+    rgb(50, 141, 147) 29%,
+    rgb(107, 18, 182) 45%,
+    rgba(255, 255, 255, 1) 57%,
+    rgba(255, 255, 255, 1) 70%,
+    rgba(0, 0, 0, 1) 85%
+  );
+`;
+
+export const AnnotationStyleBigBox = styled.div`
+  position: relative;
+  text-align: center;
+  padding: 1em;
+  width: 100%;
+  color: #fff;
+  text-shadow: #000 1px 0 5px;
+  margin-bottom: 1em;
+`;
diff --git a/services/madoc-ts/src/frontend/admin/pages/annotation-styles/create-annotation-style.tsx b/services/madoc-ts/src/frontend/admin/pages/annotation-styles/create-annotation-style.tsx
index f6179e593..e8569a617 100644
--- a/services/madoc-ts/src/frontend/admin/pages/annotation-styles/create-annotation-style.tsx
+++ b/services/madoc-ts/src/frontend/admin/pages/annotation-styles/create-annotation-style.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { AnnotationBuckets, AnnotationStyles } from '../../../../types/annotation-styles';
+import { HotSpot } from '../../../shared/atoms/HotSpot';
 import { SystemListItem } from '../../../shared/atoms/SystemListItem';
 import { SystemBackground, SystemGrid, SystemMenu, SystemMenuItem } from '../../../shared/atoms/SystemUI';
 import { getDefaultAnnotationStyles } from '../../../shared/capture-models/AnnotationStyleContext';
@@ -15,6 +15,8 @@ import { ButtonRow, Button } from '../../../shared/navigation/Button';
 import { AdminHeader } from '../../molecules/AdminHeader';
 import {
   annotationBucketOrder,
+  AnnotationStyleBigBackground,
+  AnnotationStyleBigBox,
   AnnotationStylePreview,
   AnnotationStylePreviewList,
 } from '../../molecules/AnnotationStylePreview';
@@ -42,6 +44,7 @@ export function CreateAnnotationStyle({ existing }: { existing?: AnnotationStyle
   const { t } = useTranslation();
   const canvas = useRef<any>();
   const displayAnno = useRef<any>();
+  const [toApply, setToApply] = useState<any>();
   const [newConfig, setNewConfig] = useState<AnnotationStyles['theme']>(existing?.theme || getDefaultStyles);
   const [current, setCurrent] = useState<AnnotationBuckets>('highlighted');
   const [title, setTitle] = useState(existing?.name || 'Untitled style');
@@ -70,58 +73,34 @@ export function CreateAnnotationStyle({ existing }: { existing?: AnnotationStyle
   }, [existing, title, newConfig]);
 
   useEffect(() => {
-    if (canvas.current) {
-      // eslint-disable-next-line no-inner-declarations
-      function createInitial() {
-        const linkingAnno = {
-          type: 'Annotation',
-          motivation: ['linking'],
-          target: 'https://digirati-co-uk.github.io/wunder/canvases/0#300,900,500,500',
-        };
-        canvas.current.vault.load('fake-id', linkingAnno).then((linkingAnnoWithId: any) => {
-          displayAnno.current = canvas.current.createAnnotationDisplay(linkingAnnoWithId);
-          displayAnno.current.applyStyle(newConfig[current] || { backgroundColor: 'none', borderWidth: '0' });
-          canvas.current.annotations.add(displayAnno.current);
-        });
-      }
+    const toApply = { backgroundColor: 'none', borderWidth: '0', ...(newConfig[current] || {}) };
 
-      if (canvas.current.ready) {
-        createInitial();
-      } else {
-        canvas.current.addEventListener('ready', createInitial);
-      }
+    if (!toApply[':hover']) {
+      toApply[':hover'] = {
+        backgroundColor: toApply.backgroundColor,
+        borderColor: toApply.borderColor,
+        borderStyle: toApply.borderStyle,
+        borderWidth: toApply.borderWidth,
+      };
     }
-  }, []);
-
-  useEffect(() => {
-    if (displayAnno.current) {
-      const toApply = { backgroundColor: 'none', borderWidth: '0', ...(newConfig[current] || {}) };
-
-      if (!toApply[':hover']) {
-        toApply[':hover'] = {
-          backgroundColor: toApply.backgroundColor,
-          borderColor: toApply.borderColor,
-          borderStyle: toApply.borderStyle,
-          borderWidth: toApply.borderWidth,
-        };
-      }
-      if (!toApply[':active']) {
-        toApply[':active'] = {
-          backgroundColor: toApply.backgroundColor,
-          borderColor: toApply.borderColor,
-          borderStyle: toApply.borderStyle,
-          borderWidth: toApply.borderWidth,
-        };
-      }
-
-      displayAnno.current.applyStyle(toApply);
+    if (!toApply[':active']) {
+      toApply[':active'] = {
+        backgroundColor: toApply.backgroundColor,
+        borderColor: toApply.borderColor,
+        borderStyle: toApply.borderStyle,
+        borderWidth: toApply.borderWidth,
+      };
     }
+
+    setToApply(toApply as any);
   }, [newConfig, current]);
 
   function menu(name: AnnotationBuckets) {
     return { onClick: () => setCurrent(name), $active: current === name };
   }
 
+  const hotspot = newConfig[current].hotspot ? <HotSpot $size={newConfig[current].hotspotSize || 'lg'} /> : null;
+
   return (
     <>
       <AdminHeader
@@ -142,7 +121,9 @@ export function CreateAnnotationStyle({ existing }: { existing?: AnnotationStyle
               <SystemMenuItem {...menu('contributedDocument')}>Document panel</SystemMenuItem>
               <SystemMenuItem {...menu('submissions')}>Submission panel</SystemMenuItem>
               <SystemMenuItem>
-                <span {...menu('topLevel')}>Current submission</span>
+                <SystemMenuItem as="span" {...menu('topLevel')}>
+                  Current submission
+                </SystemMenuItem>
                 <SystemMenu>
                   <SystemMenuItem {...menu('topLevel')}>Top level</SystemMenuItem>
                   <SystemMenuItem {...menu('currentLevel')}>Current level</SystemMenuItem>
@@ -176,17 +157,15 @@ export function CreateAnnotationStyle({ existing }: { existing?: AnnotationStyle
 
             <SystemListItem $block>
               <div style={{ marginBottom: '2em' }}>
-                <Helmet>
-                  <script src="https://cdn.jsdelivr.net/npm/@digirati/canvas-panel-web-components@1.0.48/dist/bundle.js" />
-                </Helmet>
-                {/* @ts-ignore */}
-                <canvas-panel
-                  ref={canvas}
-                  height={350}
-                  target="200,800,800,800"
-                  manifest-id="https://digirati-co-uk.github.io/wunder.json"
-                  canvas-id={'https://digirati-co-uk.github.io/wunder/canvases/0'}
-                />
+                <AnnotationStyleBigBackground>
+                  {toApply ? (
+                    <>
+                      <AnnotationStyleBigBox style={toApply}>{hotspot}Normal</AnnotationStyleBigBox>
+                      <AnnotationStyleBigBox style={toApply[':hover']}>{hotspot}Hover</AnnotationStyleBigBox>
+                      <AnnotationStyleBigBox style={toApply[':active']}>{hotspot}Active</AnnotationStyleBigBox>
+                    </>
+                  ) : null}
+                </AnnotationStyleBigBackground>
               </div>
 
               <AnnotationStyleForm
diff --git a/services/madoc-ts/src/frontend/admin/query-config.ts b/services/madoc-ts/src/frontend/admin/query-config.ts
index cd5572e70..255bdae40 100644
--- a/services/madoc-ts/src/frontend/admin/query-config.ts
+++ b/services/madoc-ts/src/frontend/admin/query-config.ts
@@ -3,7 +3,7 @@ import { ReactQueryConfig } from 'react-query';
 export const queryConfig: ReactQueryConfig = {
   queries: {
     staleTime: 0,
-    cacheTime: 0,
-    refetchOnMount: true,
+    cacheTime: 1000 * 60 * 60,
+    refetchOnMount: false,
   },
 };
diff --git a/services/madoc-ts/src/frontend/shared/atlas/ViewReadOnlyAnnotation.tsx b/services/madoc-ts/src/frontend/shared/atlas/ViewReadOnlyAnnotation.tsx
index e4c1910a6..61cf916b6 100644
--- a/services/madoc-ts/src/frontend/shared/atlas/ViewReadOnlyAnnotation.tsx
+++ b/services/madoc-ts/src/frontend/shared/atlas/ViewReadOnlyAnnotation.tsx
@@ -6,7 +6,7 @@ import { ReadOnlyAnnotation } from '../hooks/use-read-only-annotations';
 // Avoid bad types from Atlas.
 const CustomHTMLPortal = HTMLPortal as any;
 
-export function ViewReadOnlyAnnotation({ style, ...props }: ReadOnlyAnnotation) {
+export function ViewReadOnlyAnnotation({ id, style, target, ...props }: ReadOnlyAnnotation) {
   const [isOpen, setIsOpen] = useState(false);
   const [isHover, setIsHover] = useState(false);
   const { interactive, hotspot, hotspotSize, hidden, ...allStyles } = style;
@@ -14,33 +14,50 @@ export function ViewReadOnlyAnnotation({ style, ...props }: ReadOnlyAnnotation)
   const styleToApply = useMemo(() => {
     if (hotspot) {
       const { ':hover': hoverStyles, ':active': activeStyles, ...styles } = allStyles;
-      return isOpen ? mergeStyles(styles, activeStyles) : isHover ? mergeStyles(styles, hoverStyles) : styles;
+      return isOpen ? activeStyles : isHover ? hoverStyles : styles;
     }
     return allStyles;
   }, [allStyles, hotspot, isHover, isOpen]);
 
-  if (hotspot) {
-    return (
-      <>
-        <box interactive={interactive} {...props} style={styleToApply} />
-        <CustomHTMLPortal
-          relativeStyle
-          relativeSize={false}
-          interactive
-          target={props.target}
-          style={{ overflow: 'visible' }}
-        >
-          <HotSpot
-            $size={hotspotSize || 'md'}
-            $active={isOpen}
-            onClick={() => setIsOpen(o => !o)}
-            onMouseEnter={() => setIsHover(true)}
-            onMouseLeave={() => setIsHover(false)}
+  return (
+    <world-object id="readonly-" x={target.x} y={target.y} width={target.width} height={target.height}>
+      {hotspot ? (
+        <>
+          <box
+            id={`hotspot/${id}`}
+            html
+            interactive={interactive}
+            {...props}
+            style={styleToApply}
+            target={{ x: 0, y: 0, width: target.width, height: target.height }}
           />
-        </CustomHTMLPortal>
-      </>
-    );
-  }
-
-  return <box interactive={interactive} {...props} style={styleToApply} />;
+          <CustomHTMLPortal
+            id={`portal/${id}`}
+            relativeStyle
+            relativeSize={false}
+            interactive
+            target={{ x: 0, y: 0, width: target.width, height: target.height }}
+            style={{ overflow: 'visible' }}
+          >
+            <HotSpot
+              $size={hotspotSize || 'lg'}
+              $active={isOpen}
+              onClick={() => setIsOpen(o => !o)}
+              onMouseEnter={() => setIsHover(true)}
+              onMouseLeave={() => setIsHover(false)}
+            />
+          </CustomHTMLPortal>
+        </>
+      ) : (
+        <box
+          id={`non-hotspot/${id}`}
+          html
+          interactive={interactive}
+          {...props}
+          style={styleToApply}
+          target={{ x: 0, y: 0, width: target.width, height: target.height }}
+        />
+      )}
+    </world-object>
+  );
 }
diff --git a/services/madoc-ts/src/frontend/shared/capture-models/editor/selector-types/BoxSelector/BoxSelector.atlas.tsx b/services/madoc-ts/src/frontend/shared/capture-models/editor/selector-types/BoxSelector/BoxSelector.atlas.tsx
index 70a2a022f..6b348797e 100644
--- a/services/madoc-ts/src/frontend/shared/capture-models/editor/selector-types/BoxSelector/BoxSelector.atlas.tsx
+++ b/services/madoc-ts/src/frontend/shared/capture-models/editor/selector-types/BoxSelector/BoxSelector.atlas.tsx
@@ -40,6 +40,7 @@ export const RegionHighlight: React.FC<{
       onSave={saveCallback}
     >
       <box
+        html
         id={`${id}/box`}
         relativeStyle
         interactive={interactive}
diff --git a/services/madoc-ts/src/frontend/shared/components/AnnotationStyleForm.tsx b/services/madoc-ts/src/frontend/shared/components/AnnotationStyleForm.tsx
index ed7f4019b..e8391aa3e 100644
--- a/services/madoc-ts/src/frontend/shared/components/AnnotationStyleForm.tsx
+++ b/services/madoc-ts/src/frontend/shared/components/AnnotationStyleForm.tsx
@@ -130,7 +130,7 @@ export function AnnotationStyleForm(props: AnnotationStyleFormProps) {
                         <Input
                           type="button"
                           value="Small"
-                          $inactive={!state.hotspotSize || state.hotspotSize === 'sm'}
+                          $inactive={state.hotspotSize === 'sm'}
                           onClick={e => {
                             e.preventDefault();
                             dispatch({ type: ThemeActionTypes.SET_HOTSPOT_SIZE, value: 'sm' });
@@ -148,7 +148,7 @@ export function AnnotationStyleForm(props: AnnotationStyleFormProps) {
                         <Input
                           type="button"
                           value="Large"
-                          $inactive={state.hotspotSize === 'lg'}
+                          $inactive={!state.hotspotSize || state.hotspotSize === 'lg'}
                           onClick={e => {
                             e.preventDefault();
                             dispatch({ type: ThemeActionTypes.SET_HOTSPOT_SIZE, value: 'lg' });
diff --git a/services/madoc-ts/src/frontend/shared/components/AtlasTiledImages.tsx b/services/madoc-ts/src/frontend/shared/components/AtlasTiledImages.tsx
index 44fd91f60..525bab05d 100644
--- a/services/madoc-ts/src/frontend/shared/components/AtlasTiledImages.tsx
+++ b/services/madoc-ts/src/frontend/shared/components/AtlasTiledImages.tsx
@@ -22,7 +22,7 @@ export const AtlasTiledImages: React.FC<{ canvas: CanvasNormalized; service: Ima
   if (!tile) {
     return (
       <worldObject height={canvas.height} width={canvas.width}>
-        <box target={{ x: 0, y: 0, width: canvas.width, height: canvas.height }} id="123" backgroundColor="#000" />
+        <box html target={{ x: 0, y: 0, width: canvas.width, height: canvas.height }} id="123" backgroundColor="#000" />
       </worldObject>
     );
   }
diff --git a/services/madoc-ts/src/frontend/shared/components/Breadcrumbs.tsx b/services/madoc-ts/src/frontend/shared/components/Breadcrumbs.tsx
index d80e56f09..8b7fa06a3 100644
--- a/services/madoc-ts/src/frontend/shared/components/Breadcrumbs.tsx
+++ b/services/madoc-ts/src/frontend/shared/components/Breadcrumbs.tsx
@@ -25,6 +25,7 @@ export const BreadcrumbList = styled.div`
   font-size: 0.9em;
   min-height: 2.5em;
   margin: 0.5em 0;
+  align-items: center;
 `;
 
 export const BreadcrumbItem = styled.div<{ active?: boolean; $icon?: boolean }>`
diff --git a/services/madoc-ts/src/frontend/shared/components/NotificationCenter.tsx b/services/madoc-ts/src/frontend/shared/components/NotificationCenter.tsx
index 4a70cb305..b15833e7c 100644
--- a/services/madoc-ts/src/frontend/shared/components/NotificationCenter.tsx
+++ b/services/madoc-ts/src/frontend/shared/components/NotificationCenter.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import useDropdownMenu from 'react-accessible-dropdown-menu-hook';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
@@ -267,9 +267,8 @@ export const NotificationCenter: React.FC<{ isAdmin?: boolean }> = ({ isAdmin })
     },
     {
       refetchInterval: 2 * 60 * 1000, // Refresh every 2 minutes
-      refetchOnWindowFocus: 'always',
-      refetchOnReconnect: 'always',
       enabled: !!user,
+      staleTime: 2 * 60 * 1000,
     }
   );
   const { data, refetch } = useQuery(
@@ -278,6 +277,7 @@ export const NotificationCenter: React.FC<{ isAdmin?: boolean }> = ({ isAdmin })
       return api.notifications.getAllNotifications();
     },
     {
+      staleTime: 2 * 60 * 1000,
       enabled: internalIsOpen && user,
     }
   );
diff --git a/services/madoc-ts/src/frontend/shared/components/UserBar.tsx b/services/madoc-ts/src/frontend/shared/components/UserBar.tsx
index 1d61c99de..3713f0dea 100644
--- a/services/madoc-ts/src/frontend/shared/components/UserBar.tsx
+++ b/services/madoc-ts/src/frontend/shared/components/UserBar.tsx
@@ -131,7 +131,7 @@ export const UserBar: React.FC<{
 
   useEffect(() => {
     setIsOpen(false);
-  }, [location, setIsOpen]);
+  }, [location]);
 
   return (
     <>
diff --git a/services/madoc-ts/src/frontend/shared/hooks/use-api-query.ts b/services/madoc-ts/src/frontend/shared/hooks/use-api-query.ts
index f657c8d6a..1a69aa605 100644
--- a/services/madoc-ts/src/frontend/shared/hooks/use-api-query.ts
+++ b/services/madoc-ts/src/frontend/shared/hooks/use-api-query.ts
@@ -105,14 +105,14 @@ export function createApiHook(
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     return queryMethod(
-      [keyToUse, argsToUse],
+      [keyToUse, { args: argsToUse }],
       () => {
         if (typeof argsToUse === 'undefined') {
           console.error(`Bad call to apiHook.${key}(undefined) with enabled.`);
         }
         return apiToUse[key](...argsToUse);
       },
-      { enabled: typeof argsToUse !== 'undefined', ...(config || {}) }
+      { enabled: typeof argsToUse !== 'undefined', cacheTime: 1000 * 60 * 60, ...(config || {}) }
     );
   };
 }
diff --git a/services/madoc-ts/src/frontend/shared/hooks/use-data.ts b/services/madoc-ts/src/frontend/shared/hooks/use-data.ts
index 29f2598fc..6fde3a4ab 100644
--- a/services/madoc-ts/src/frontend/shared/hooks/use-data.ts
+++ b/services/madoc-ts/src/frontend/shared/hooks/use-data.ts
@@ -59,7 +59,6 @@ export function usePrefetchData<Data = any, TKey = any, TVariables = any>(
 
     const newVars = Array.isArray(initialVars) ? vars || initialVars : { ...initialVars, ...vars };
 
-
     await Promise.all([
       cache.prefetchQuery([key, newVars] as any, (queryKey: any, queryVars: any) => {
         return getData(queryKey, queryVars, api, pathname);
@@ -120,7 +119,7 @@ export function useData<Data = any, TKey = any, TVariables = any>(
       }
       return undefined as any;
     },
-    { refetchOnMount: false, ...(config || {}), useErrorBoundary: true }
+    { refetchOnMount: false, cacheTime: 1000 * 60 * 60, ...(config || {}), useErrorBoundary: true }
   );
 }
 
diff --git a/services/madoc-ts/src/frontend/shared/hooks/use-loaded-capture-model.ts b/services/madoc-ts/src/frontend/shared/hooks/use-loaded-capture-model.ts
index c050d87c3..f7177dc35 100644
--- a/services/madoc-ts/src/frontend/shared/hooks/use-loaded-capture-model.ts
+++ b/services/madoc-ts/src/frontend/shared/hooks/use-loaded-capture-model.ts
@@ -40,7 +40,7 @@ export function useLoadedCaptureModel(modelId?: string, initialModel?: CaptureMo
       return { canvas, target, captureModel };
     },
     {
-      cacheTime: 0,
+      cacheTime: 1000 * 60 * 60,
       staleTime: 0,
       refetchOnMount: true,
       keepPreviousData: true,
diff --git a/services/madoc-ts/src/frontend/site/hooks/canvas-menu/annotation-panel.tsx b/services/madoc-ts/src/frontend/site/hooks/canvas-menu/annotation-panel.tsx
index 4f3297bc7..65c261943 100644
--- a/services/madoc-ts/src/frontend/site/hooks/canvas-menu/annotation-panel.tsx
+++ b/services/madoc-ts/src/frontend/site/hooks/canvas-menu/annotation-panel.tsx
@@ -10,6 +10,7 @@ import {
 } from '../../../shared/atoms/MetadataConfiguration';
 import { useHighlightedRegions } from '../../../shared/hooks/use-highlighted-regions';
 import { AnnotationsIcon } from '../../../shared/icons/AnnotationsIcon';
+import { useProjectAnnotationStyles } from '../use-project-annotation-styles';
 import { CanvasMenuHook } from './types';
 
 const AnnotationContainer = styled.div`
@@ -26,6 +27,7 @@ export function useAnnotationPanel(active: boolean): CanvasMenuHook {
     setCurrentCollection,
     setIsActive,
   } = useHighlightedRegions();
+  const styles = useProjectAnnotationStyles();
 
   useEffect(() => {
     setIsActive(active);
@@ -62,6 +64,8 @@ export function useAnnotationPanel(active: boolean): CanvasMenuHook {
         return (
           <MetadataCardItem
             key={item.id}
+            // onMouseOver={styles.contributedAnnotations.hotspot ? undefined : () => setHighlightStatus(item.id, true)}
+            // onMouseOut={styles.contributedAnnotations.hotspot ? undefined : () => setHighlightStatus(item.id, false)}
             onMouseOver={() => setHighlightStatus(item.id, true)}
             onMouseOut={() => setHighlightStatus(item.id, false)}
           >
diff --git a/services/madoc-ts/src/frontend/site/pages/loaders/task-loader.tsx b/services/madoc-ts/src/frontend/site/pages/loaders/task-loader.tsx
index 2f9c2896c..e1c369456 100644
--- a/services/madoc-ts/src/frontend/site/pages/loaders/task-loader.tsx
+++ b/services/madoc-ts/src/frontend/site/pages/loaders/task-loader.tsx
@@ -26,7 +26,7 @@ export const TaskLoader: UniversalComponent<TaskLoaderType> = createUniversalCom
       TaskLoader,
       {},
       {
-        cacheTime: 0,
+        cacheTime: 1000 * 60 * 60,
         staleTime: 0,
       }
     );
diff --git a/services/madoc-ts/yarn.lock b/services/madoc-ts/yarn.lock
index d04eddb07..ff36d65f8 100644
--- a/services/madoc-ts/yarn.lock
+++ b/services/madoc-ts/yarn.lock
@@ -17819,7 +17819,7 @@ react-query@^1.5.10:
     "@scarf/scarf" "^1.0.6"
     ts-toolbelt "^6.9.4"
 
-react-query@^2.16.0:
+react-query@^2.26.4:
   version "2.26.4"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-2.26.4.tgz#18239b4c0b61d0b744f0d4a91f566b294fa9f752"
   integrity sha512-sXGG0gh1ah11AcfptYOCRpGDoYMnssq6riQUpQaLSM2EOodVkexp3zNLk1MFDgfRGuXQst40Tnu17oNwni66aA==