diff --git a/.gitignore b/.gitignore
index c790e24..28cb6df 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 /datastore
 /downloads
 /env
+*.dump
 
diff --git a/nomad-front-end/package.json b/nomad-front-end/package.json
index 55089c2..6cdaf4d 100644
--- a/nomad-front-end/package.json
+++ b/nomad-front-end/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.0.0",
+    "react-csv": "^2.2.2",
     "@ant-design/pro-card": "^2.3.0",
     "@ant-design/pro-layout": "^7.4.0",
     "antd": "^5.4.7",
diff --git a/nomad-front-end/src/App.module.css b/nomad-front-end/src/App.module.css
index b80fc68..930de12 100644
--- a/nomad-front-end/src/App.module.css
+++ b/nomad-front-end/src/App.module.css
@@ -21,3 +21,9 @@
 .AdminMenu {
   background-color: #001529;
 }
+
+a[aria-disabled=true]{
+  cursor: default;
+  pointer-events: none;
+  color: #a3a3a3;
+}
\ No newline at end of file
diff --git a/nomad-front-end/src/components/NavBar/PageHeader/Controls/AccountingControls.jsx b/nomad-front-end/src/components/NavBar/PageHeader/Controls/AccountingControls.jsx
index 7285170..1b30c98 100644
--- a/nomad-front-end/src/components/NavBar/PageHeader/Controls/AccountingControls.jsx
+++ b/nomad-front-end/src/components/NavBar/PageHeader/Controls/AccountingControls.jsx
@@ -1,10 +1,92 @@
 import React from 'react'
 import { Button, Space, Divider } from 'antd'
-
 import classes from '../PageHeader.module.css'
+import { CSVLink } from "react-csv";
+import { CloudDownloadOutlined } from '@ant-design/icons'
+
 
 const AccountingControls = props => {
-  const { setGrantsVisible } = props
+  const { setGrantsVisible,  tableData, tableHeader, accType } = props
+  const standardColumns = {
+    grants: ['Grant Code', 'Description', 'Users', 'Manual Cost', 'Auto Cost', 'Total Cost [£]']
+  }
+  const columnsParser = (head, data, type) => {
+    let columns = []
+
+    if (type === 'Grants') {
+
+      columns = standardColumns.grants
+
+    } else {
+
+      columns = [head]
+      let presentColumns = data[0].costsPerInstrument;
+      presentColumns.forEach(({ instrument }) => {
+        const newColumnsToAdd = [
+          instrument + " Exp Time Manual",
+          instrument + " Exp Time Auto",
+          instrument + " Exp Time Cost [£]"
+        ]
+        columns = [...columns, ...newColumnsToAdd]
+
+      });
+      columns = [...columns, 'Total Cost [£]']
+    }
+
+
+
+    return columns;
+  }
+
+
+
+  const rowsParser = (data, type) => {
+    //column names are done, now do the data
+    let rows = [];
+
+    if (type === 'Grants') {
+
+      data.forEach(row => {
+        let flatrow = [];
+        //destructure important stuff
+        const { costExps, costClaims, grantCode, description, totalCost, usersArray } = row;
+
+        //flatten the users array as text
+        let users = usersArray.map(userOBJ => (
+          `${userOBJ.username} (${userOBJ.fullName})`
+        ))
+
+        //finalize
+        flatrow = [grantCode, description, users.join(', '), costClaims, costExps, totalCost];
+
+        //add to the rows
+        rows = [...rows, flatrow]
+      });
+
+    } else {
+
+      data.forEach(row => {
+        let FlatRow = [row.name];
+        row.costsPerInstrument.forEach(instrumentData => {
+          const { cost, expTimeAuto, expTimeClaims } = instrumentData
+          FlatRow = [...FlatRow, expTimeClaims, expTimeAuto, cost]
+        })
+        //now add the total cost
+        FlatRow = [...FlatRow, row.totalCost]
+        //now push the flattened row
+        rows.push(FlatRow)
+      })
+    }
+    return rows
+  }
+
+  const dataParser = (head, data, type) => {
+
+    let rows = data[1] ? [columnsParser(head, data, type), ...rowsParser(data, type)] : []
+    return rows;
+
+  }
+
   return (
     <Space className={classes.ExtraContainer}>
       <Button className={classes.Button} type='primary' onClick={() => props.toggleCostDrawer()}>
@@ -19,6 +101,11 @@ const AccountingControls = props => {
           Add Grant
         </Button>
       )}
+      <Divider type="vertical" />
+      <CSVLink
+        aria-disabled={!tableData[1]}
+        data={dataParser(tableHeader, tableData, accType)}
+      ><CloudDownloadOutlined /></CSVLink>
     </Space>
   )
 }
diff --git a/nomad-front-end/src/components/NavBar/PageHeader/PageHeader.jsx b/nomad-front-end/src/components/NavBar/PageHeader/PageHeader.jsx
index 21f2d62..984fa39 100644
--- a/nomad-front-end/src/components/NavBar/PageHeader/PageHeader.jsx
+++ b/nomad-front-end/src/components/NavBar/PageHeader/PageHeader.jsx
@@ -94,7 +94,8 @@ const PageHeaderEl = props => {
     username,
     grpName,
     accessLevel,
-    authToken
+    authToken,
+    accountType
   } = props
 
   let headerTitle = ''
@@ -268,7 +269,11 @@ const PageHeaderEl = props => {
           toggleCostDrawer={props.tglCostingDrawer}
           toggleSetGrants={props.tglSetGrants}
           toggleAddGrant={props.tglAddGrant}
+          loading={props.accountingLoading}
+          tableData={props.accountingTableData}
+          tableHeader={props.accountingTableHeader}
           setGrantsVisible={props.setGrantsVisible}
+          accType={accountType}
         />
       )
 
@@ -361,6 +366,9 @@ const PageHeaderEl = props => {
 
 const mapStateToProps = state => {
   return {
+    accountingTableData: state.accounts.costsTableData,
+    accountingLoading: state.accounts.loading,
+    accountingTableHeader: state.accounts.tableHeader,
     cardSwitchOn: state.dash.showCards,
     statusButtonsData: state.dash.statusButtonsData,
     instFormVisible: state.instruments.showForm,
@@ -401,6 +409,7 @@ const mapStateToProps = state => {
     collectionId: state.collections.meta.id,
     setGrantsVisible: state.accounts.showSetGrants,
     grantFormVisible: state.accounts.grantFormVisible,
+    accountType: state.accounts.type,
     checkedUsers: state.users.checked
   }
 }
diff --git a/nomad-front-end/vite.config.js b/nomad-front-end/vite.config.js
index f8eec8b..5271281 100644
--- a/nomad-front-end/vite.config.js
+++ b/nomad-front-end/vite.config.js
@@ -7,5 +7,8 @@ export default defineConfig({
   server: {
     host: true,
     port: 3003
+  },
+  optimizeDeps: {
+    exclude: ['react-csv']
   }
 })