diff --git a/package-lock.json b/package-lock.json
index 8d6e61f..5fdab07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4965,9 +4965,10 @@
       "version": "17.0.60",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.60.tgz",
       "integrity": "sha512-pCH7bqWIfzHs3D+PDs3O/COCQJka+Kcw3RnO9rFA2zalqoXg7cNjJDh6mZ7oRtY1wmY4LVwDdAbA1F7Z8tv3BQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
+        "@types/scheduler": "^0.16",
         "csstype": "^3.0.2"
       }
     },
diff --git a/public/index.html b/public/index.html
index 98d4e90..782e8a0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,7 +25,7 @@
     />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css"
     />
     <meta name="viewport" content="initial-scale=1, width=device-width" />
     <!--
diff --git a/src/App.js b/src/App.js
index 332a766..dcc86cc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -136,6 +136,8 @@ function App() {
   const [isFileUploaded, setIsFileUploaded] = useState(false);
   const [showTickSizeInput, setShowTickSizeInput] = useState(false);
   const [tickFontSize, setTickFontSize] = useState(12);
+  const [outputImageWidth, setOutputImageWidth] = useState(120);
+  const [dpi, setDpi] = useState(300);
   const [isFlipped, setIsFlipped] = useState(false);
   const [flipTimeLoading, setFlipTimeLoading] = useState(false);
   const focusMilestone1 = useRef();
@@ -169,6 +171,8 @@ function App() {
   const [showWikiEdDiff, setWikiEdDiff] = useState(false);
   const [isError, setIsError] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
+  const [showDownloadOptions, setShowDownloadOptions] = useState(false);
+  const [includeURL, setIncludeURL] = useState(true);
   const [url, setUrl] = useState("");
   const [highlightMode, setHighlightMode] = useState("diff");
   const [nSharedChars, setNSharedChars] = useState(50);
@@ -256,7 +260,8 @@ function App() {
 
     // save the png:
     saveSvgAsPng.saveSvgAsPng(newSvg, downloadFileName, {
-      scale: 3, // 300 %
+      // TODO: set the scale based on the output size and dpi values:
+      scale: 3, // 300 % 
       backgroundColor: "white",
     });
   };
@@ -319,6 +324,10 @@ function App() {
         setShowTickSizeInput,
         tickFontSize, 
         setTickFontSize,
+        outputImageWidth,
+        setOutputImageWidth,
+        dpi, 
+        setDpi,
         isFlipped,
         setIsFlipped,
         flipTimeLoading,
@@ -346,6 +355,10 @@ function App() {
         setIsError,
         showOptions,
         setShowOptions,
+        showDownloadOptions, 
+        setShowDownloadOptions,
+        includeURL, 
+        setIncludeURL,
         url,
         setUrl,
         highlightMode,
diff --git a/src/components/CorpusMetadata/NavigationAndStats/DownloadData.js b/src/components/CorpusMetadata/NavigationAndStats/DownloadData.js
index 6631b35..b9b2b7a 100644
--- a/src/components/CorpusMetadata/NavigationAndStats/DownloadData.js
+++ b/src/components/CorpusMetadata/NavigationAndStats/DownloadData.js
@@ -66,7 +66,7 @@ const DownloadData = ({ data, status }) => {
             >
               <IconButton size="large" variant="text" sx={{ fontSize: "15px" }}>
                 <i
-                  className="fa-solid fa-file-csv"
+                  className="fa-solid fa-table-list"
                   style={{ color: "#2863A5" }}
                 ></i>
               </IconButton>
diff --git a/src/components/CorpusMetadata/NavigationAndStats/index.js b/src/components/CorpusMetadata/NavigationAndStats/index.js
index e49d06e..9a2b3d5 100644
--- a/src/components/CorpusMetadata/NavigationAndStats/index.js
+++ b/src/components/CorpusMetadata/NavigationAndStats/index.js
@@ -10,12 +10,14 @@ import {
 } from "../../../services/TextReuseData";
 import { useNavigate } from "react-router-dom";
 import { Checkbox } from "@mui/material";
-import { useState } from "react";
-import { lightSrtFolders, srtFoldersGitHub } from "../../../assets/srtFolders";
+import { useState, useEffect } from "react";
+import { lightSrtFolders, srtFoldersGitHub, srtFolders } from "../../../assets/srtFolders";
+import { buildPairwiseCsvURL } from "../../../utility/Helper"
 
 import { setInitialValues } from "../../../functions/setInitialValues";
 import { getMetadataObject } from "../../../functions/getMetadataObject";
 import { setPairwiseVizData } from "../../../functions/setVisualizationData";
+// import { csv } from "d3";
 
 const NavigationAndStats = () => {
   const {
@@ -45,6 +47,98 @@ const NavigationAndStats = () => {
   const navigate = useNavigate();
   const [displaySelected, setDisplaySelected] = useState(false);
 
+  // Default the URLs to null - if null, no download or visualisation will be possible (and we can show a message):
+  const [pairwiseLiteUrl, setPairwiseLiteUrl] = useState(null);
+  const [pairwiseUrl, setPairwiseUrl] = useState(null);
+  const [pairwiseFileName, setPairwiseFileName] = useState(null);
+
+  // Check if relevant parts have been loaded before we try to build the URLs and check them
+  // If the lite url is 
+  const booksReady =
+    checkedBooks[0]?.release_version?.url &&
+    checkedBooks[1]?.release_version?.url &&
+    releaseCode &&
+    srtFolders[releaseCode];
+
+  useEffect(() => {
+    if (!booksReady) return;
+    const checkSelectedUrls = async () => {
+      console.log(checkedBooks);
+      if (checkedBooks.length !== 2) {
+        // If we have not selected two books, then set these pairwise parameters to null
+        setPairwiseLiteUrl(null);
+        setPairwiseUrl(null);
+        setPairwiseFileName(null);
+        return;
+        
+        }
+      else {    
+      
+        const book1 = checkedBooks[0];
+        const book2 = checkedBooks[1];
+        const book1Filename = book1?.release_version?.url.split("/").slice(-1)[0];
+        const book1Code = book1Filename.split(".").slice(2).join(".");
+        const book2Filename = book2?.release_version?.url.split("/").slice(-1)[0];
+        const book2Code = book2Filename.split(".").slice(2).join(".");
+
+      // Create URLs for the selected books - if URL returns a response, then we set the variable
+      const LiteUrl = await buildPairwiseCsvURL(releaseCode, book1, book2, true);
+      const fullUrl = await buildPairwiseCsvURL(releaseCode, book1, book2, false);
+      const csvFileName = `${book1Code}_${book2Code}.csv`;
+      setPairwiseFileName(csvFileName);
+
+      // Check the URLs - if they are valid then set the state variables
+      // If the URL is not valid, then set the state variable to null
+      try {
+        const responseLite = await fetch(LiteUrl, { method: 'HEAD' });
+        if (responseLite.ok) {
+          setPairwiseLiteUrl(LiteUrl);
+          } else {
+            setPairwiseLiteUrl(null);
+          }
+        } catch (error) {
+              
+            const srtFolder = srtFoldersGitHub[releaseCode];
+            const csvUrl = `${srtFolder}/${book1Code}/${csvFileName}`;
+            const responseGitHub = await fetch(csvUrl, { method: 'HEAD' });
+            if (responseGitHub.ok) {
+              setPairwiseLiteUrl(csvUrl);
+            } else {
+              setPairwiseLiteUrl(null);
+              console.log("No URL found for pairwise Lite data");
+          }
+          };
+      try {
+        const responseFull = await fetch(fullUrl, { method: 'HEAD' });
+        if (responseFull.ok) {
+          setPairwiseUrl(fullUrl);
+          } else {
+            setPairwiseUrl(null);
+          }
+        } catch (error) {
+          console.log("No URL found for pairwise Full data");
+          setPairwiseUrl(null);
+        }
+        }
+      };
+    checkSelectedUrls();
+    }, [checkedBooks, releaseCode, booksReady, pairwiseFileName, pairwiseUrl, pairwiseLiteUrl]);
+
+  // Download the text reuse data from the server - getting the full data file:
+  const downloadTextReuseData = async (downloadUrl) => {
+
+    if (downloadUrl !== null) {
+
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.download = pairwiseFileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } 
+  }
+  
+
   // Load the book visualisation from the checked versions in metadata table:
   const loadChartFromSelected = async () => {
     // reset context values:
@@ -73,8 +167,10 @@ const NavigationAndStats = () => {
     const csvFileName = `${book1Code}_${book2Code}.csv`;
     let csvUrl = `${srtFolder}/${book1Code}/${csvFileName}`;
 
+    console.log("PairwiseLitUrl: ", pairwiseLiteUrl);
+
     // Download the pairwise text reuse data from the KITAB webserver:
-    let CSVFile = await downloadCsvData(csvUrl);
+    let CSVFile = await downloadCsvData(pairwiseLiteUrl);
     setLoadedCsvFile(CSVFile);
 
     // if this fails: try to download it from GitHub:
@@ -214,7 +310,12 @@ const NavigationAndStats = () => {
             <Typography ml="10px" color="#fbbf24" sx={{ width: "max-content" }}>
               Select a second book to visualise pairwise text reuse
             </Typography>
+          ) : checkedBooks.length < 3 && pairwiseLiteUrl == null ? (
+            <Typography ml="10px" color="#fbbf24" sx={{ width: "max-content" }}>
+              No text reuse data available for selected books
+            </Typography>
           ) : (
+            <>
             <Box>
               <Tooltip
                 title={
@@ -244,6 +345,69 @@ const NavigationAndStats = () => {
                 </span>
               </Tooltip>
             </Box>
+
+            <Box>
+              <Tooltip
+                title={
+                  checkedBooks.length < 3 ? pairwiseUrl === null ?
+                    "Pairwise File not available for selected books"
+                    : "Download Pairwise File in CSV format"
+                    : "Select 2 books to download a file with pairwise text reuse"
+                }
+                placement="top"
+              >
+                <span>
+                  <IconButton
+                    size="large"
+                    variant="text"
+                    sx={{ fontSize: "15px" }}
+                    disabled={checkedBooks.length < 3 ? false : true}
+                    onClick={() => downloadTextReuseData(pairwiseUrl)}
+                  >
+                    {checkedBooks.length < 3 && pairwiseUrl !== null ? (
+                      <i
+                        className="fa-solid fa-file"
+                        style={{ color: "green" }}
+                      ></i>
+                    ) : (
+                      <i className="fa-solid fa-file"></i>
+                    )}
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Box>
+            <Box>
+              <Tooltip
+                title={
+                  checkedBooks.length < 3 ? pairwiseLiteUrl === null ?
+                    "Lite Pairwise File not available for selected books"
+                    : "Download Lite Pairwise File in CSV format"
+                    : "Select 2 books to download a file with pairwise text reuse"
+                }
+                placement="top"
+              >
+                <span>
+                  <IconButton
+                    size="large"
+                    variant="text"
+                    sx={{ fontSize: "15px" }}
+                    disabled={checkedBooks.length < 3 ? false : true}
+                    onClick={() => downloadTextReuseData(pairwiseLiteUrl)}
+                  >
+                    {checkedBooks.length < 3 && pairwiseLiteUrl !== null ? (
+                      <i
+                        className="fa-solid fa-file-half-dashed"
+                        style={{ color: "green" }}
+                      ></i>
+                    ) : (
+                      <i className="fa-solid fa-file-half-dashed"></i>
+                    )}
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Box>
+          </>
+            
           )}
 
           {checkedNotification ? (
@@ -305,7 +469,7 @@ const NavigationAndStats = () => {
       {displaySelected && (
         <Box mb="15px">
           {checkedBooks.map((item, i) => (
-            <Box display="flex" alignItems="center">
+            <Box key={item.id || i} display="flex" alignItems="center">
               <Checkbox
                 sx={{ width: "30px", height: "30px" }}
                 size="small"
diff --git a/src/components/DiffViewer/index.js b/src/components/DiffViewer/index.js
index 75e16ad..1fad3ae 100644
--- a/src/components/DiffViewer/index.js
+++ b/src/components/DiffViewer/index.js
@@ -43,7 +43,7 @@ const DiffViewerComponent = () => {
         alignItems={"center"}
         mb={"20px"}
       >
-        <Typography variant="h4">Diff viewer</Typography>
+        <Typography variant="h4">Diff Viewer</Typography>
         <Typography>
           View code on{" "}
           <Link
diff --git a/src/components/Visualisation/Chart/index.jsx b/src/components/Visualisation/Chart/index.jsx
index bc83fa6..ba3cccb 100644
--- a/src/components/Visualisation/Chart/index.jsx
+++ b/src/components/Visualisation/Chart/index.jsx
@@ -855,11 +855,6 @@ const Visual = (props) => {
         <VisualizationHeader
           restoreCanvas={restoreCanvas}
           isPairwiseViz={props.isPairwiseViz}
-          downloadFileName={
-            isFlipped
-              ? `KITAB_explore_${releaseCode}_${metaData?.book2?.versionCode}_${metaData?.book1?.versionCode}.png`
-              : `KITAB_explore_${releaseCode}_${metaData?.book1?.versionCode}_${metaData?.book2?.versionCode}.png`
-          }
         />
       </SectionHeaderLayout>
       <Box
diff --git a/src/components/Visualisation/SectionHeader/SectionHeaderLayout.js b/src/components/Visualisation/SectionHeader/SectionHeaderLayout.js
index 986daf2..9ac2bca 100644
--- a/src/components/Visualisation/SectionHeader/SectionHeaderLayout.js
+++ b/src/components/Visualisation/SectionHeader/SectionHeaderLayout.js
@@ -2,11 +2,18 @@ import { Box, Typography } from "@mui/material";
 import React from "react";
 import ToggleButton from "./ToggleButton";
 import BAExtra from "./BookAlignmentHeader/BAExtra";
+import DownloadPanel from "./VisualizationHeader/DownloadPanel";
 import { useContext } from "react";
 import { Context } from "../../../App";
 
 const SectionHeaderLayout = ({ item, children, toggle, setToggle }) => {
-  const { showOptions } = useContext(Context);
+  const { 
+    showOptions, 
+    showDownloadOptions,
+    isFlipped,
+    releaseCode,
+    metaData,
+  } = useContext(Context);
   return (
     <Box mb="20px">
       <Box
@@ -48,6 +55,20 @@ const SectionHeaderLayout = ({ item, children, toggle, setToggle }) => {
         </Box>
       </Box>
       {item.title === "Books" && showOptions && <BAExtra />}
+      {item.title === "Pairwise Visualization" && showDownloadOptions && <DownloadPanel 
+        isPairwiseViz={true}
+        downloadFileName={
+          isFlipped
+            ? `KITAB_explore_${releaseCode}_${metaData?.book2?.versionCode}_${metaData?.book1?.versionCode}.png`
+            : `KITAB_explore_${releaseCode}_${metaData?.book1?.versionCode}_${metaData?.book2?.versionCode}.png`
+        }
+      />}
+      {item.title === "One-to-Many Visualization" && showDownloadOptions && <DownloadPanel 
+        isPairwiseViz={false}
+        downloadFileName={
+          `KITAB_explore_${releaseCode}_${metaData?.book1?.versionCode}_all.png`
+        }
+      />}
     </Box>
   );
 };
diff --git a/src/components/Visualisation/SectionHeader/VisualizationHeader/DownloadPanel.js b/src/components/Visualisation/SectionHeader/VisualizationHeader/DownloadPanel.js
new file mode 100644
index 0000000..3c8ea5d
--- /dev/null
+++ b/src/components/Visualisation/SectionHeader/VisualizationHeader/DownloadPanel.js
@@ -0,0 +1,180 @@
+import React from "react";
+import { useContext, useRef, useEffect } from "react";
+import { Context } from "../../../../App";
+import { Box } from "@mui/material";
+import { Button, TextField, Typography, Tooltip } from "@mui/material";
+import * as d3 from "d3";
+//import TickFontSizeControl from "./TickFontSizeControl";
+
+
+const DownloadPanel = ( {isPairwiseViz, downloadFileName} ) => {
+  const { 
+    downloadPNG, 
+    tickFontSize, 
+    setTickFontSize,
+    outputImageWidth,
+    setOutputImageWidth,
+    dpi, 
+    setDpi,
+    includeURL,
+    setIncludeURL
+  } = useContext(Context);
+  const tickInputRef = useRef(null);
+  const widthInputRef = useRef(null);
+  const dpiInputRef = useRef(null);
+  const svgSelector = isPairwiseViz ? '#svgChart' : '#scatter-chart';
+
+  const handleInputChange = (e) => {
+    setTickFontSize(parseInt(e.target.value) || 12);
+  };
+
+  const handleWidthInputChange = (e) => {
+    setOutputImageWidth(parseInt(e.target.value) || 120);
+  }
+
+  const handleDpiInputChange = (e) => {
+    setDpi(parseInt(e.target.value) || 300);
+  }
+
+  const handleIncludeURL = () => {
+    setIncludeURL((prev) => !prev);
+  }
+
+  // Apply font size when it changes
+    useEffect(() => {
+      // TODO: fix the font size for one-to-many chart!
+      console.log(`${svgSelector} .tick text`);
+      d3.selectAll(`${svgSelector} .tick text`).style("font-size", `${tickFontSize}px`);
+    }, [tickFontSize, svgSelector]);
+
+  const handleDownload = () => {
+    if (isPairwiseViz) {
+      downloadPNG(downloadFileName, "svgChart", includeURL);
+    } else {
+      downloadPNG(downloadFileName, "scatter-chart", includeURL);
+    }
+  };
+  console.log("downloadFileName: "+downloadFileName);
+  console.log("isPairwiseViz: "+isPairwiseViz);
+  
+
+  return (
+    <>
+      <Box
+        display={"flex"}
+        justifyContent={"right"}
+        sx={{
+          alignItems: "center",
+          
+          px: {
+            xs: "25px",
+            sm: "25px",
+          },
+          gap: "10px",
+          bgcolor: "#F0F0F5",
+          borderRadius: "5px",
+          position: "relative",
+          borderTop: "1px solid white",
+        }}
+      > 
+        <Typography>Download options:</Typography>
+        <Tooltip placement="top" title={"Set the width of the output image"}>
+          <Box display="flex" alignItems="center">
+            <Typography>Width:</Typography>
+            <TextField
+              inputRef={widthInputRef}
+              type="text"
+              value={outputImageWidth}
+              onChange={handleWidthInputChange}
+              size="small"
+              variant="standard"
+              sx={{
+                width: 40,
+                ml: 1,
+                "& .MuiInputBase-input": {
+                  padding: "6px 8px",
+                  fontSize: "0.85rem",
+                },
+              }}
+            />
+            <Typography>mm</Typography>
+          </Box>
+        </Tooltip>
+        <Tooltip placement="top" title={"Set the resolution of the output image"}>
+          <Box display="flex" alignItems="center">
+            <Typography>Resolution:</Typography>
+            <TextField
+              inputRef={dpiInputRef}
+              type="text"
+              value={dpi}
+              onChange={handleDpiInputChange}
+              size="small"
+              variant="standard"
+              sx={{
+                width: 40,
+                ml: 1,
+                "& .MuiInputBase-input": {
+                  padding: "6px 8px",
+                  fontSize: "0.85rem",
+                },
+              }}
+            />
+            <Typography>dpi</Typography>
+          </Box>
+        </Tooltip>
+        <Tooltip placement="top" title={"Change the size of the X and Y axis tick labels"}>
+          <Box display="flex" alignItems="center">
+            <Typography>Axis labels size:</Typography>
+            <TextField
+              inputRef={tickInputRef}
+              type="number"
+              value={tickFontSize}
+              onChange={handleInputChange}
+              size="small"
+              variant="standard"
+              sx={{
+                width: 60,
+                ml: 1,
+                "& .MuiInputBase-input": {
+                  padding: "6px 8px",
+                  fontSize: "0.85rem",
+                },
+              }}
+            />
+            <Typography>px</Typography>
+          </Box>
+        </Tooltip>
+        <Tooltip placement="top" title={"Include URL of this visualization in the downloaded image?"}>
+          <Button onClick={handleIncludeURL}>
+            <Box display="flex" alignItems="center">
+              <Typography
+                ariant="body2"
+                sx={{ textTransform: "none", color: "#333" }}
+              >
+                Include URL:&nbsp;
+              </Typography>
+              <Typography sx={{ mr: "8px", mt: "2px" }}>
+                {includeURL ? (
+                    <i className="fa-solid fa-square-check"></i>
+                ) : (
+                    <i className="fa-regular fa-square"></i>
+                )}
+              </Typography>
+            </Box>
+          </Button>
+        </Tooltip>
+        <Button
+          onClick={() => handleDownload()}
+          color="primary"
+          variant="text"
+          rel="noreferrer"
+          target="_blank"
+        >
+          Download PNG
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+export default DownloadPanel;
diff --git a/src/components/Visualisation/SectionHeader/FlipButton.js b/src/components/Visualisation/SectionHeader/VisualizationHeader/FlipButton.js
similarity index 96%
rename from src/components/Visualisation/SectionHeader/FlipButton.js
rename to src/components/Visualisation/SectionHeader/VisualizationHeader/FlipButton.js
index ede08aa..7054b69 100644
--- a/src/components/Visualisation/SectionHeader/FlipButton.js
+++ b/src/components/Visualisation/SectionHeader/VisualizationHeader/FlipButton.js
@@ -1,6 +1,6 @@
 import { Button } from "@mui/material";
 import { Tooltip } from "@mui/material";
-import { Context } from "../../../App";
+import { Context } from "../../../../App";
 import React, { useContext } from "react";
 
 const FlipButton = () => {
diff --git a/src/components/Visualisation/SectionHeader/TickFontSizeControl.js b/src/components/Visualisation/SectionHeader/VisualizationHeader/TickFontSizeControl.js
similarity index 98%
rename from src/components/Visualisation/SectionHeader/TickFontSizeControl.js
rename to src/components/Visualisation/SectionHeader/VisualizationHeader/TickFontSizeControl.js
index 31bb8f4..cd86dbc 100644
--- a/src/components/Visualisation/SectionHeader/TickFontSizeControl.js
+++ b/src/components/Visualisation/SectionHeader/VisualizationHeader/TickFontSizeControl.js
@@ -1,7 +1,7 @@
 import { Button } from "@mui/material";
 import { TextField, Tooltip, ClickAwayListener } from "@mui/material";
 import * as d3 from "d3";
-import { Context } from "../../../App";
+import { Context } from "../../../../App";
 import React, { useContext, useEffect, useRef } from "react";
 
 
diff --git a/src/components/Visualisation/SectionHeader/VisualizationHeader.js b/src/components/Visualisation/SectionHeader/VisualizationHeader/index.js
similarity index 77%
rename from src/components/Visualisation/SectionHeader/VisualizationHeader.js
rename to src/components/Visualisation/SectionHeader/VisualizationHeader/index.js
index 0973605..646a5b5 100644
--- a/src/components/Visualisation/SectionHeader/VisualizationHeader.js
+++ b/src/components/Visualisation/SectionHeader/VisualizationHeader/index.js
@@ -1,20 +1,13 @@
 import { Box, Button, IconButton, Link, Tooltip } from "@mui/material";
 import React, { useContext } from "react";
-import { Context } from "../../../App";
+import { Context } from "../../../../App";
 import FlipButton from "./FlipButton";
-import TickFontSizeControl from "./TickFontSizeControl";
-import ScatterLegend from "../MultiChart/ScatterLegend";
+import ScatterLegend from "../../MultiChart/ScatterLegend";
 
 
-const VisualizationHeader = ({ restoreCanvas, isPairwiseViz, downloadFileName, colorScale, width }) => {
-  const { downloadPNG } = useContext(Context);
-  const handleDownload = () => {
-    if (isPairwiseViz) {
-      downloadPNG(downloadFileName, "svgChart");
-    } else {
-      downloadPNG(downloadFileName, "scatter-chart");
-    }
-  };
+const VisualizationHeader = ({ restoreCanvas, isPairwiseViz, colorScale, width }) => {
+    const { showDownloadOptions, setShowDownloadOptions } = useContext(Context);
+  
   return (
     <Box sx={{ postion: "relative" }}>
       <Box display="flex" justifyContent="space-between">
@@ -26,9 +19,7 @@ const VisualizationHeader = ({ restoreCanvas, isPairwiseViz, downloadFileName, c
           target="_blank"
         >
           <IconButton
-            sx={{
-              color: "#2862a5",
-            }}
+            sx={{color: "#2862a5"}}
           >
             <i
               className="fa-regular fa-circle-question"
@@ -73,9 +64,9 @@ const VisualizationHeader = ({ restoreCanvas, isPairwiseViz, downloadFileName, c
             </Button>
           </Tooltip>
           {isPairwiseViz ? <FlipButton /> : ""}
-          <Tooltip title="Download Chart as PNG" placement="top">
+          <Tooltip title="Download Chart and select download options" placement="top">
             <Button
-              onClick={handleDownload}
+              onClick={() => setShowDownloadOptions(!showDownloadOptions)}
               color="primary"
               variant="outlined"
               rel="noreferrer"
@@ -97,7 +88,6 @@ const VisualizationHeader = ({ restoreCanvas, isPairwiseViz, downloadFileName, c
               <i className="fa-solid fa-cloud-arrow-down"></i>
             </Button>
           </Tooltip>
-          {isPairwiseViz ? <TickFontSizeControl svgSelector="#svgChart" /> : ""}
         </Box>
       </Box>
     </Box>
diff --git a/src/utility/Helper.js b/src/utility/Helper.js
index 1a46862..306e683 100644
--- a/src/utility/Helper.js
+++ b/src/utility/Helper.js
@@ -1,12 +1,48 @@
+import { srtFolders, lightSrtFolders} from "../assets/srtFolders"
 import { config } from "../config";
 const { GITHUB_BASE_URL, GITHUB_BASE_RAW_URL } = config;
 
+
+
+
 const pad = (n, width, z) => {
   z = z || "0";
   n = n + "";
   return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
 };
 
+const getVersionIDfromURI = (versionURI, includeExt=true) => {
+  /* eslint-disable no-unused-vars */
+  const [author, book, ...version] = versionURI.split(".");
+  /* eslint-enable no-unused-vars */
+  return version.join(".");
+}
+
+const getVersionIDfromURL = (versionURL, includeExt=true) => {
+  const versionURI = versionURL.split("/").pop();
+  return getVersionIDfromURI(versionURI, includeExt);
+}
+
+/** 
+   * build the URL to the pairwise CSV file on the KITAB webserver:
+   * based on the metadata for both books:
+   * 
+   * @param {String} releaseCode OpenITI release version code
+   * @param {Object} b1Data full metadata for book 1
+   * @param {Object} b2Data full metadata for book 2
+   * @param {Boolean} light Download the light or full text reuse data csv
+   * 
+   * @returns String (URL of the pairwise CSV file)
+  */
+  const buildPairwiseCsvURL = async (releaseCode, b1Data, b2Data, light=false) => {
+    // get the IDs (incl. extension) for both books:
+    const b1ID = getVersionIDfromURL(b1Data.release_version.url, true);
+    const b2ID = getVersionIDfromURL(b2Data.release_version.url, true);
+    const baseURL = light ? lightSrtFolders[releaseCode] : srtFolders[releaseCode];
+    // build the URL:
+    return `${baseURL}/${b1ID}/${b1ID}_${b2ID}.csv`;
+  }
+
 /**
  * Remove the page parameter from a querystring
  * @param {Object} searchParams querystring object
@@ -319,5 +355,8 @@ export {
   cleanImech,
   parseImech,
   cleanBeforeDiff,
-  bisectLeft
+  bisectLeft, 
+  getVersionIDfromURI,
+  getVersionIDfromURL,
+  buildPairwiseCsvURL
 };