diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index f0a1ee43..6f81cd98 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -22,6 +22,7 @@
                 "react-grid-layout": "^1.4.4",
                 "react-icons": "^4.11.0",
                 "react-inlinesvg": "^3.0.2",
+                "react-modal": "^3.16.1",
                 "react-plotly.js": "^2.6.0",
                 "react-redux": "^9.0.2",
                 "react-responsive-carousel": "^3.2.23",
@@ -10929,6 +10930,29 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
+        "node_modules/react-lifecycles-compat": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+            "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+        },
+        "node_modules/react-modal": {
+            "version": "3.16.1",
+            "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+            "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+            "dependencies": {
+                "exenv": "^1.2.0",
+                "prop-types": "^15.7.2",
+                "react-lifecycles-compat": "^3.0.0",
+                "warning": "^4.0.3"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "peerDependencies": {
+                "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+                "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+            }
+        },
         "node_modules/react-plotly.js": {
             "version": "2.6.0",
             "resolved": "https://registry.npmjs.org/react-plotly.js/-/react-plotly.js-2.6.0.tgz",
@@ -11439,9 +11463,9 @@
             }
         },
         "node_modules/rollup": {
-            "version": "3.26.3",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.3.tgz",
-            "integrity": "sha512-7Tin0C8l86TkpcMtXvQu6saWH93nhG3dGQ1/+l5V2TDMceTxO7kDiK6GzbfLWNNxqJXm591PcEZUozZm51ogwQ==",
+            "version": "3.29.4",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
+            "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
             "bin": {
                 "rollup": "dist/bin/rollup"
             },
@@ -12810,13 +12834,13 @@
             }
         },
         "node_modules/vite": {
-            "version": "4.4.7",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
-            "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
+            "version": "4.5.2",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
+            "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
             "dependencies": {
                 "esbuild": "^0.18.10",
-                "postcss": "^8.4.26",
-                "rollup": "^3.25.2"
+                "postcss": "^8.4.27",
+                "rollup": "^3.27.1"
             },
             "bin": {
                 "vite": "bin/vite.js"
@@ -12927,6 +12951,14 @@
                 "makeerror": "1.0.12"
             }
         },
+        "node_modules/warning": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+            "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+            "dependencies": {
+                "loose-envify": "^1.0.0"
+            }
+        },
         "node_modules/weak-map": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/weak-map/-/weak-map-1.0.8.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index bf68e3b3..e5ca028f 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -27,6 +27,7 @@
         "react-grid-layout": "^1.4.4",
         "react-icons": "^4.11.0",
         "react-inlinesvg": "^3.0.2",
+        "react-modal": "^3.16.1",
         "react-plotly.js": "^2.6.0",
         "react-redux": "^9.0.2",
         "react-responsive-carousel": "^3.2.23",
diff --git a/webapp/src/layouts/Footer.tsx b/webapp/src/layouts/Footer.tsx
index aef73485..0a81a98f 100644
--- a/webapp/src/layouts/Footer.tsx
+++ b/webapp/src/layouts/Footer.tsx
@@ -4,7 +4,7 @@ export default function Footer(): ReactElement {
         <footer className="bg-gray w-full mt-auto">
             <div className="w-full mx-auto max-w-screen-xl p-4 flex items-center justify-center">
                 <span className="text-sm text-primary text-center justify-center dark:text-gray-400">
-                    Jordan Dialpuri, Haroldas Bagdonas and Jon Agirre
+                    York Structural Biology Laboratory
                     <br />
                     © 2023-2024 University of York. All Rights Reserved.
                     <br />
diff --git a/webapp/src/layouts/NavBar.tsx b/webapp/src/layouts/NavBar.tsx
index 953547f1..fb2e885a 100644
--- a/webapp/src/layouts/NavBar.tsx
+++ b/webapp/src/layouts/NavBar.tsx
@@ -1,11 +1,21 @@
-import { type Dispatch, type ReactElement, type SetStateAction } from 'react';
-import { GENERAL_CITATION, GITHUB_REPO } from '../data/Constants.tsx';
+import {
+    type Dispatch,
+    type ReactElement,
+    type SetStateAction,
+    useState,
+} from 'react';
+import { GITHUB_REPO } from '../data/Constants.tsx';
 import React from 'react';
+import CitationModal from '../modals/Citations/Citations.tsx';
 export default function NavBar({
     setResetApp,
 }: {
     setResetApp: Dispatch<SetStateAction<boolean>>;
 }): ReactElement {
+    const [modalOpen, setModalOpen] = useState(false);
+    const handleModalOpen = () => {
+        setModalOpen(true);
+    };
     return (
         <div
             id="navbar"
@@ -33,6 +43,7 @@ export default function NavBar({
                     refinement and analysis
                 </span>
             </div>
+            <CitationModal modalOpen={modalOpen} setModalOpen={setModalOpen} />
 
             <div className="flex">
                 <div className="h-12 w-12 mx-auto my-4 sm:w-12 sm:mt-12 sm:mr-6 flex items-center ">
@@ -79,7 +90,7 @@ export default function NavBar({
                     </a>
                 </div>
                 <div className="h-12 w-12 mx-auto my-4 sm:w-12 sm:mt-12 sm:mr-6 flex items-center ">
-                    <a id="citation" href={GENERAL_CITATION}>
+                    <a onClick={handleModalOpen} id="citation">
                         <svg
                             className="w-6 h-6 text-gray-500 hover:scale-125 transition-all"
                             xmlns="http://www.w3.org/2000/svg"
@@ -96,10 +107,6 @@ export default function NavBar({
                             className="w-full hover:scale-125 transition-all hidden dark:block"
                             src="/github-mark.png"
                         />
-                        <img
-                            className="w-full hover:scale-125 transition-all block dark:hidden"
-                            src="/github-mark-white.png"
-                        />
                     </a>
                 </div>
             </div>
diff --git a/webapp/src/modals/Citations/Citations.tsx b/webapp/src/modals/Citations/Citations.tsx
new file mode 100644
index 00000000..6b6da6cd
--- /dev/null
+++ b/webapp/src/modals/Citations/Citations.tsx
@@ -0,0 +1,137 @@
+import React, { type Dispatch, type SetStateAction } from 'react';
+import Modal from 'react-modal';
+
+const customStyles = {
+    content: {
+        top: '50%',
+        left: '50%',
+        right: 'auto',
+        bottom: 'auto',
+        // // marginRight: '-50%',
+        transform: 'translate(-50%, -50%)',
+        color: 'black',
+        borderRadius: 10,
+        overflowY: 'auto',
+        maxHeight: '100vh',
+    },
+};
+
+export default function CitationModal(props: {
+    modalOpen: boolean;
+    setModalOpen: Dispatch<SetStateAction<boolean>>;
+}) {
+    const handleModalClose = () => {
+        props.setModalOpen(false);
+    };
+
+    return (
+        <div className="max-h-screen overflow-auto">
+            <Modal
+                isOpen={props.modalOpen}
+                onRequestClose={handleModalClose}
+                contentLabel="Example Modal"
+                style={customStyles}
+            >
+                <div className="flex flex-row w-full space-between ">
+                    <h2 className="mr-16 sm:mr-96">Citations</h2>
+                    <button
+                        type="button"
+                        onClick={handleModalClose}
+                        className="text-gray-400 bg-transparent hover:scale-105 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center "
+                    >
+                        <svg
+                            className="w-3 h-3"
+                            aria-hidden="true"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 14 14"
+                        >
+                            <path
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth="2"
+                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+                            />
+                        </svg>
+                        <span className="sr-only">Close modal</span>
+                    </button>
+                </div>
+
+                <div className="mt-4 flex flex-col space-y-2  text-sm sm:text-base">
+                    <h3>
+                        If you have used the{' '}
+                        <b>
+                            <i>Privateer Web App</i>
+                        </b>
+                        , please cite:{' '}
+                    </h3>
+                    <strong>
+                        Dialpuri, J. S., Bagdonas, H., Schofield, L. C., Pham,
+                        P. T., Holland, L., Bond, P. S., Sánchez Rodríguez, F.,
+                        McNicholas, S. J. & Agirre, J. (2024). Online
+                        carbohydrate 3D structure validation with the Privateer
+                        web app. Acta Cryst. F80.
+                        https://doi.org/10.1107/S2053230X24000359
+                    </strong>
+                </div>
+
+                {/* <div className="mt-4 flex flex-col space-y-2"> */}
+                {/*    <h3>If you have used the <b><i>Privateer Database</i></b>, please cite: </h3> */}
+                {/*    <span>Dialpuri, J. S., Bagdonas, H., Schofield, L. C., Pham, P. T., Holland, L., Bond, P. S., Sánchez Rodríguez, F., McNicholas, S. J. & Agirre, J. (2024). Online carbohydrate 3D structure validation with the Privateer web app. Acta Cryst. F80. https://doi.org/10.1107/S2053230X24000359</span> */}
+                {/* </div> */}
+
+                <div className="mt-4 flex flex-col space-y-2 font text-sm sm:text-base">
+                    <h3>
+                        The <i>Privateer Web App</i> is possible thanks to these
+                        foundational studies:
+                    </h3>
+                    <span>
+                        Dialpuri, J. S., Bagdonas, H., Atanasova, M., Schofield,
+                        L. C., Hekkelman, M. L., Joosten, R. P., & Agirre, J.
+                        (2023). Analysis and validation of overall N-glycan
+                        conformation in Privateer. Acta Crystallographica
+                        Section D: Structural Biology, 79(6).
+                    </span>
+                    <span>
+                        Bagdonas, H., Ungar, D., & Agirre, J. (2020). Leveraging
+                        glycomics data in glycoprotein 3D structure validation
+                        with Privateer. Beilstein Journal of Organic Chemistry,
+                        16(1), 2523-2533.
+                    </span>
+                    <span>
+                        McNicholas, S., & Agirre, J. (2017). Glycoblocks: a
+                        schematic three-dimensional representation for glycans
+                        and their interactions. Acta Crystallographica Section
+                        D: Structural Biology, 73(2), 187-194.
+                    </span>
+                    <span>
+                        Atanasova, M., Nicholls, R. A., Joosten, R. P., &
+                        Agirre, J. (2022). Updated restraint dictionaries for
+                        carbohydrates in the pyranose form. Acta
+                        Crystallographica Section D: Structural Biology, 78(4),
+                        455-465.
+                    </span>
+                    <span>
+                        Agirre, J., Iglesias-Fernández, J., Rovira, C., Davies,
+                        G. J., Wilson, K. S., & Cowtan, K. D. (2015). Privateer:
+                        software for the conformational validation of
+                        carbohydrate structures. Nature structural & molecular
+                        biology, 22(11), 833-834.
+                    </span>
+                    <span>
+                        Agirre, J., Davies, G., Wilson, K., & Cowtan, K. (2015).
+                        Carbohydrate anomalies in the PDB. Nature chemical
+                        biology, 11(5), 303-303.
+                    </span>
+                    <span>
+                        Atanasova, M., Bagdonas, H., & Agirre, J. (2020).
+                        Structural glycobiology in the age of electron
+                        cryo-microscopy. Current Opinion in Structural Biology,
+                        62, 70-78.
+                    </span>
+                </div>
+            </Modal>
+        </div>
+    );
+}