diff --git a/packages/cccv/package.json b/packages/cccv/package.json
index aeb08027..0ebd5326 100644
--- a/packages/cccv/package.json
+++ b/packages/cccv/package.json
@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
-    "@chromatic-com/storybook": "^1.5.0",
+    "@chromatic-com/storybook": "^3.2.2",
     "@lingui/cli": "^4.11.1",
     "@lingui/macro": "^4.11.1",
     "@playwright/test": "^1.42.1",
@@ -64,7 +64,7 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/dompurify": "^3.0.5",
-    "@types/node": "^20.11.24",
+    "@types/node": "^22.9.1",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@types/testing-library__user-event": "^4.2.0",
@@ -74,9 +74,9 @@
     "autoprefixer": "^10.4.18",
     "babel-plugin-macros": "^3.1.0",
     "check-dependencies": "^2.0.0",
-    "eslint": "^8.57.1",
+    "eslint": "^9.15.0",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-storybook": "^0.8.0",
     "file-loader": "^6.2.0",
diff --git a/packages/cccv/src/components/LoadingIndicator/LoadingIndicatorOverlay.tsx b/packages/cccv/src/components/LoadingIndicator/LoadingIndicatorOverlay.tsx
index 4612fc32..f35aef92 100644
--- a/packages/cccv/src/components/LoadingIndicator/LoadingIndicatorOverlay.tsx
+++ b/packages/cccv/src/components/LoadingIndicator/LoadingIndicatorOverlay.tsx
@@ -12,7 +12,7 @@ export function Spinner(props: { width: number, height: number }) {
         <svg className={`animate-spin -ml-1 mr-3 w-${props.width} h-${props.height} text-white" xmlns="http://www.w3.org/2000/svg`}
              fill="none" viewBox="0 0 24 24">
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="navy"
-                    stroke-width="4"></circle>
+                    strokeWidth="4"></circle>
             <path className="opacity-75" fill="currentColor"
                   d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
         </svg>
diff --git a/packages/cccv/src/components/StringCarousel/StringCarousel.tsx b/packages/cccv/src/components/StringCarousel/StringCarousel.tsx
index f05d08f4..55d988ca 100644
--- a/packages/cccv/src/components/StringCarousel/StringCarousel.tsx
+++ b/packages/cccv/src/components/StringCarousel/StringCarousel.tsx
@@ -25,9 +25,9 @@ const StringCarousel: React.FC<CarouselProps> = ({ displayValues, index, setInde
 
     return (
         <div className={["flex items-center justify-center space-x-2", className].join(' ')}>
-            <button onClick={handlePrev} className="border-none text-xl">&lt;</button>
+            <button onClick={handlePrev} className="hover:bg-transparent hover:text-nui border-none text-xl">&lt;</button>
             <h2 className="text-2lg h-full text-center">{displayValues[currentIndex]}</h2>
-            <button onClick={handleNext} className="border-none text-xl">&gt;</button>
+            <button onClick={handleNext} className="hover:bg-transparent hover:text-nui border-none text-xl">&gt;</button>
         </div>
     )
 }
diff --git a/packages/cccv/src/pages/MapPage/MapPage.tsx b/packages/cccv/src/pages/MapPage/MapPage.tsx
index 69d4d548..ae4ee71c 100644
--- a/packages/cccv/src/pages/MapPage/MapPage.tsx
+++ b/packages/cccv/src/pages/MapPage/MapPage.tsx
@@ -45,6 +45,8 @@ import getFeaturesUnderMouse from "@lib/getFeaturesUnderMouse.ts"
 import {urlDefaultMapStyle} from "@lib/urlsAndPaths.ts"
 import env from "@src/env.ts"
 import useMapFocus from "@lib/useMapFocus.tsx"
+// import formatFilename from "@lib/formatAsFilename.ts"
+// import dateTimeString from "@lib/dateTimeString.ts"
 
 const ADDRESS_ZOOM = 12
 
@@ -83,6 +85,10 @@ const useFMUSelection = () => {
     return {fmuSelected, currentFmu, fmuIndex, currentFmus, setCurrentFmus, setFmuIndex, clearFmus, loadFmus}
 }
 
+// function getFileName(currentFmu: FmuFullDetails) {
+//     return formatFilename(currentFmu.freshwaterManagementUnit.fmuName1 || "", `fmu_${currentFmu.freshwaterManagementUnit.id}`) + `_${dateTimeString()}` + ".pdf"
+// }
+
 export default function MapPage() {
     const {setError} = useContext(ErrorContext)
     const locationDetails = useLoaderData()
@@ -94,7 +100,6 @@ export default function MapPage() {
     const sliderRef = useRef<HTMLDivElement>(null)
     const [sliderWidth, setSliderWidth] = useState<number>(0)
 
-    const {mapSnapshot} = useMapSnapshot()
     const {setLoading} = useLoadingIndicator()
     const mapRef = useRef<CombinedMapRef | null>(null)
 
@@ -102,6 +107,10 @@ export default function MapPage() {
 
     const [featureBeingRolledOver, setFeatureBeingRolledOver] = useState<Feature | FeatureCollection | null>(null)
 
+    const [showInfoPanel] = useState<boolean | null>(false)
+
+    const {mapSnapshot, takeMapSnapshot} = useMapSnapshot()
+
     useMapFocus(mapRef, selectedLocation)
 
     const fetchFmu = async () => {
@@ -123,10 +132,18 @@ export default function MapPage() {
         setError(null)
     }
 
+    useEffect(() => {
+        if (currentFmu) {
+            takeMapSnapshot(mapRef, selectedLocation)
+        //     setPdfDocument(pdf({ document: <FreshwaterManagementUnitPDF {...currentFmu} />}))
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentFmu])
+
     useEffect(() => {
         fetchFmu().catch((e) => console.error(e))
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedLocation, setError, mapSnapshot])
+    }, [selectedLocation, setError])
 
     useEscapeKey(() => {
         selectLocation(null)
@@ -217,11 +234,7 @@ export default function MapPage() {
         }
     }
 
-    const afterMapLoaded = () => {
-        if (locationDetails) {
-            selectLocation(locationDetails as IMViewLocation)
-        }
-    }
+    const afterMapLoaded = () => {}
 
     return (
         <div className="map-page bg-white">
@@ -291,7 +304,7 @@ export default function MapPage() {
                             id={CURRENT_FMU_LAYER}
                             type="fill"
                             paint={mapProperties.currentFMU.fill}
-                            filter={['==', ['id'], currentFmu?.freshwaterManagementUnit?.id]}
+                            filter={['==', ['id'], currentFmu?.freshwaterManagementUnit?.id ?? null]}
                             source={FMU_BOUNDARIES_SOURCE}
                             maxzoom={DEFAULT_ZOOM+5}
                         />)}
@@ -311,7 +324,8 @@ export default function MapPage() {
                     </div>
 
                     {currentFmu && (
-                        <SlidingPanel showPanel={!!currentFmus.length} contentChanged={false}
+                        <SlidingPanel contentChanged={false} showPanel={showInfoPanel || true}
+                                      onResize={(width) => setSliderWidth(width)}
                                       onClose={() => clearFmus()}>
                             {/*{currentFmus.length > 1 && (<FmuPanelHeader className={"ml-6 mb-8"} fmuName1={currentFmu.freshwaterManagementUnit.fmuName1!}/>)}*/}
                             {selectedLocation?.address && <PhysicalAddress address={selectedLocation.address}/>}
@@ -324,6 +338,7 @@ export default function MapPage() {
                                 <div
                                     className="text-sm text-center font-extralight mb-2">{`Catchment ${fmuIndex! + 1} of ${currentFmus.length}`}</div>
                             </div>)}
+
                             <FreshwaterManagementUnit
                                 key={0}
                                 {...currentFmu}