diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 331f0117..5f79a61c 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -23,5 +23,6 @@ module.exports = {
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-unused-vars': 'off',
+    'react/react-in-jsx-scope': 'off',
   },
 }
diff --git a/.prettierrc b/.prettierrc
index 6fed3d0f..c6838a94 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,6 @@
   "tabWidth": 2,
   "useTabs": false,
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "jsxSingleQuote": true
 }
diff --git a/Eplant/Eplant.tsx b/Eplant/Eplant.tsx
index 2c810bc1..7f3ed886 100644
--- a/Eplant/Eplant.tsx
+++ b/Eplant/Eplant.tsx
@@ -170,7 +170,7 @@ export default function Eplant() {
       <Routes>
         <Route path={rootPath}>
           <Route index element={<MainEplant />} />
-          <Route path="pane" element={<DirectPane />} />
+          <Route path='pane' element={<DirectPane />} />
         </Route>
       </Routes>
     </ThemeProvider>
@@ -199,7 +199,7 @@ function DirectPane() {
 
   return loaded ? (
     <div
-      className="flexlayout__layout"
+      className='flexlayout__layout'
       style={{
         display: 'flex',
         flexDirection: 'column',
@@ -216,8 +216,8 @@ function DirectPane() {
         }}
         className={id == activeId ? 'flexlayout__tabset-selected' : ''}
       >
-        <div className="flexlayout__tab_button flexlayout__tab_button_top flexlayout__tab_button--selected">
-          <div className="flexlayout__tab-content">
+        <div className='flexlayout__tab_button flexlayout__tab_button_top flexlayout__tab_button--selected'>
+          <div className='flexlayout__tab-content'>
             {panes[id]?.activeGene ? panes[id]?.activeGene + ' - ' : ''}
             {views.find((v) => v.id == panes[id]?.view)?.name}
           </div>
@@ -261,7 +261,7 @@ export function MainEplant() {
   return (
     <>
       <ResponsiveDrawer
-        variant="persistent"
+        variant='persistent'
         open={true}
         PaperProps={{
           sx: {
@@ -378,7 +378,7 @@ function EplantLayout() {
             onRenderTab={(node, renderValues) => {
               renderValues.buttons = [
                 <IconButton
-                  key="close"
+                  key='close'
                   // Why is this necessary?
                   // Idk, but flexlayout-react uses it for their close buttons
                   // And they don't work without it
@@ -392,9 +392,9 @@ function EplantLayout() {
                     panesDispatch({ type: 'close', id: node.getId() })
                     model.doAction(Actions.deleteTab(node.getId()))
                   }}
-                  size="small"
+                  size='small'
                 >
-                  <Close fontSize="inherit" />
+                  <Close fontSize='inherit' />
                 </IconButton>,
               ]
             }}
@@ -402,7 +402,7 @@ function EplantLayout() {
         ) : (
           <div>
             <CircularProgress
-              variant="indeterminate"
+              variant='indeterminate'
               value={globalProgress * 100}
             />
           </div>
@@ -463,25 +463,25 @@ function EplantLayout() {
     renderValues.stickyButtons.push(
       <IconButton
         onClick={() => addTab({ tabsetId: node.getId() })}
-        size="small"
-        key="add-tab"
+        size='small'
+        key='add-tab'
       >
-        <Add fontSize="inherit" />
-      </IconButton>
+        <Add fontSize='inherit' />
+      </IconButton>,
     )
     renderValues.buttons.push(
-      <Tooltip title="Open in new window">
+      <Tooltip title='Open in new window'>
         <IconButton
           onClick={() => {
             const id = node.getSelectedNode()?.getId()
             if (id) makePopout(id)
           }}
-          size="small"
-          key="make-popout"
+          size='small'
+          key='make-popout'
         >
-          <OpenInNew fontSize="inherit" />
+          <OpenInNew fontSize='inherit' />
         </IconButton>
-      </Tooltip>
+      </Tooltip>,
     )
   }
 }
diff --git a/Eplant/UI/Dropdown.tsx b/Eplant/UI/Dropdown.tsx
index 69f994a3..f5816397 100644
--- a/Eplant/UI/Dropdown.tsx
+++ b/Eplant/UI/Dropdown.tsx
@@ -70,9 +70,9 @@ export default function Dropdown({
       <Button
         id={buttonId}
         aria-controls={open ? menuId : undefined}
-        aria-haspopup="true"
+        aria-haspopup='true'
         aria-expanded={open ? 'true' : undefined}
-        variant="contained"
+        variant='contained'
         disableElevation
         onClick={handleClick}
         endIcon={<KeyboardArrowDown />}
diff --git a/Eplant/UI/GeneHeader.tsx b/Eplant/UI/GeneHeader.tsx
index c6918801..1a48bf68 100644
--- a/Eplant/UI/GeneHeader.tsx
+++ b/Eplant/UI/GeneHeader.tsx
@@ -17,10 +17,10 @@ export default function GeneHeader({
     >
       {geneticElement ? (
         <>
-          <Typography variant="h6">{geneticElement.id}</Typography>
+          <Typography variant='h6'>{geneticElement.id}</Typography>
           <Divider
-            orientation="vertical"
-            variant="middle"
+            orientation='vertical'
+            variant='middle'
             sx={{
               borderColor: (theme) => theme.palette.text.secondary,
               borderRightWidth: '3px',
@@ -28,12 +28,12 @@ export default function GeneHeader({
             }}
             flexItem
           />
-          <Typography variant="h6">
+          <Typography variant='h6'>
             {geneticElement.aliases.join(', ')}
           </Typography>
         </>
       ) : (
-        <Typography variant="h4">No gene selected</Typography>
+        <Typography variant='h4'>No gene selected</Typography>
       )}
     </Box>
   )
diff --git a/Eplant/UI/GeneticElementComponent.tsx b/Eplant/UI/GeneticElementComponent.tsx
index 810dd119..4064cd09 100644
--- a/Eplant/UI/GeneticElementComponent.tsx
+++ b/Eplant/UI/GeneticElementComponent.tsx
@@ -25,7 +25,7 @@ function SelectedIndicator(props: BoxProps & { hover: boolean }) {
   return (
     <Box {...props} position={'relative'}>
       <Box
-        position="absolute"
+        position='absolute'
         sx={(theme) => ({
           left: 0,
           top: 0,
@@ -36,7 +36,7 @@ function SelectedIndicator(props: BoxProps & { hover: boolean }) {
         })}
       />
       <Box
-        position="absolute"
+        position='absolute'
         sx={(theme) => ({
           left: props.hover ? '0' : '0px',
           top: 0,
@@ -161,10 +161,10 @@ export default function GeneticElementComponent({
       onClick={onClick}
     >
       <Stack
-        direction="row"
+        direction='row'
         gap={1}
         height={24}
-        overflow="hidden"
+        overflow='hidden'
         whiteSpace={'nowrap'}
         sx={(theme) => ({})}
       >
@@ -202,7 +202,7 @@ export default function GeneticElementComponent({
           ref={textContainerRef}
         >
           <Stack
-            direction="row"
+            direction='row'
             gap={1}
             sx={(theme) => ({
               animation: textScroll
@@ -217,14 +217,14 @@ export default function GeneticElementComponent({
             ref={textGroupRef}
           >
             <Typography
-              variant="body2"
+              variant='body2'
               // sx={{ fontWeight: selected ? 'bold' : 'regular' }}
             >
               {geneticElement.id}
             </Typography>
-            <Divider orientation="vertical" flexItem></Divider>
+            <Divider orientation='vertical' flexItem></Divider>
             <Typography
-              variant="body2"
+              variant='body2'
               // sx={{ fontWeight: selected ? 'bold' : 'regular' }}
             >
               {geneticElement.aliases.join(', ')}
diff --git a/Eplant/UI/Layout/FailedToLoad.tsx b/Eplant/UI/Layout/FailedToLoad.tsx
index 2f4d72ac..a0aa87d0 100644
--- a/Eplant/UI/Layout/FailedToLoad.tsx
+++ b/Eplant/UI/Layout/FailedToLoad.tsx
@@ -9,14 +9,14 @@ const Illustration = ({
   ...props
 }: { color: string } & SVGProps<SVGSVGElement>) => (
   <svg
-    width="120"
-    height="240"
-    viewBox="0 0 204 386"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    width='120'
+    height='240'
+    viewBox='0 0 204 386'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
   >
     <path
-      d="M196.053 220.328H98.3851C102.003 213.092 107.791 201.518 110.683 187.773C112.13 183.432 112.854 178.367 112.854 174.028L156.262 130.619C159.156 127.725 159.156 123.384 156.262 120.493C153.368 117.598 149.026 117.598 146.135 120.493L112.857 153.771C110.686 137.132 104.175 122.663 92.5998 111.086C87.5349 105.297 83.1938 100.235 80.302 94.4469L115.027 59.7216C117.922 56.8274 117.922 52.4859 115.027 49.5947C112.133 46.7005 107.792 46.7005 104.9 49.5947L75.2344 79.2524C65.8312 43.8035 91.8762 13.4166 93.3207 11.9693C96.2149 9.07511 95.4914 4.73359 92.5971 1.84246C89.7029 -1.05177 85.3614 -0.328197 82.4703 2.56604C82.4703 2.56604 61.4901 25.7171 58.5955 57.5485L42.6801 35.8447C40.5095 32.9505 35.4444 32.2269 32.5533 34.3976C29.659 36.5682 28.9354 41.6333 31.1061 44.5272L61.4902 84.3173C65.108 95.8915 71.6171 108.192 83.194 120.49C99.833 137.853 101.28 159.556 98.3857 178.366L58.5956 155.939V155.215L44.1269 113.978C42.6797 110.36 38.3384 108.189 34.7209 109.637C31.1033 111.084 28.9324 115.425 30.3796 119.043L39.7856 145.088L15.1872 131.34C12.2956 129.893 7.95416 130.617 5.78392 134.235C3.61367 137.852 5.06034 142.194 8.67815 144.361L94.7691 192.832C89.7042 208.747 82.4713 219.601 82.4713 219.601L7.95037 219.603C3.60905 219.603 0.7146 222.497 0.7146 226.839V277.48C0.7146 281.822 3.60884 284.716 7.95037 284.716H18.8009L31.8223 379.488C32.5459 383.106 35.4402 386 39.0581 386H164.939C168.557 386 171.451 383.106 172.175 379.488L185.196 284.716L196.05 284.713C200.391 284.713 203.285 281.819 203.285 277.478V226.836C203.285 223.218 200.391 220.327 196.05 220.327L196.053 220.328ZM158.433 372.252H45.5735L33.2757 285.435H170.734L158.433 372.252ZM188.82 270.969H15.1867V234.797H188.813L188.82 270.969Z"
+      d='M196.053 220.328H98.3851C102.003 213.092 107.791 201.518 110.683 187.773C112.13 183.432 112.854 178.367 112.854 174.028L156.262 130.619C159.156 127.725 159.156 123.384 156.262 120.493C153.368 117.598 149.026 117.598 146.135 120.493L112.857 153.771C110.686 137.132 104.175 122.663 92.5998 111.086C87.5349 105.297 83.1938 100.235 80.302 94.4469L115.027 59.7216C117.922 56.8274 117.922 52.4859 115.027 49.5947C112.133 46.7005 107.792 46.7005 104.9 49.5947L75.2344 79.2524C65.8312 43.8035 91.8762 13.4166 93.3207 11.9693C96.2149 9.07511 95.4914 4.73359 92.5971 1.84246C89.7029 -1.05177 85.3614 -0.328197 82.4703 2.56604C82.4703 2.56604 61.4901 25.7171 58.5955 57.5485L42.6801 35.8447C40.5095 32.9505 35.4444 32.2269 32.5533 34.3976C29.659 36.5682 28.9354 41.6333 31.1061 44.5272L61.4902 84.3173C65.108 95.8915 71.6171 108.192 83.194 120.49C99.833 137.853 101.28 159.556 98.3857 178.366L58.5956 155.939V155.215L44.1269 113.978C42.6797 110.36 38.3384 108.189 34.7209 109.637C31.1033 111.084 28.9324 115.425 30.3796 119.043L39.7856 145.088L15.1872 131.34C12.2956 129.893 7.95416 130.617 5.78392 134.235C3.61367 137.852 5.06034 142.194 8.67815 144.361L94.7691 192.832C89.7042 208.747 82.4713 219.601 82.4713 219.601L7.95037 219.603C3.60905 219.603 0.7146 222.497 0.7146 226.839V277.48C0.7146 281.822 3.60884 284.716 7.95037 284.716H18.8009L31.8223 379.488C32.5459 383.106 35.4402 386 39.0581 386H164.939C168.557 386 171.451 383.106 172.175 379.488L185.196 284.716L196.05 284.713C200.391 284.713 203.285 281.819 203.285 277.478V226.836C203.285 223.218 200.391 220.327 196.05 220.327L196.053 220.328ZM158.433 372.252H45.5735L33.2757 285.435H170.734L158.433 372.252ZM188.82 270.969H15.1867V234.797H188.813L188.82 270.969Z'
       fill={color}
     />
   </svg>
@@ -31,11 +31,24 @@ export default function FailedToLoad(props: {
 }) {
   const theme = useTheme()
   return (
-    <Stack gap={2} alignItems="center" direction="column" width="100%" height="100vh" justifyContent="center">
-      <Illustration
-        color={theme.palette.primary.main}
-      />
-      <Typography variant="h6" sx={{ textAlign: 'center', maxWidth: 600, fontWeight: 400, marginTop: 2 }}>
+    <Stack
+      gap={2}
+      alignItems='center'
+      direction='column'
+      width='100%'
+      height='100vh'
+      justifyContent='center'
+    >
+      <Illustration color={theme.palette.primary.main} />
+      <Typography
+        variant='h6'
+        sx={{
+          textAlign: 'center',
+          maxWidth: 600,
+          fontWeight: 400,
+          marginTop: 2,
+        }}
+      >
         {props.geneticElement
           ? `There was an error while trying to load ${props.view.name.toLowerCase()} for ${
               props.geneticElement.id
@@ -43,7 +56,7 @@ export default function FailedToLoad(props: {
           : `There was an error while trying to load ${props.view.name.toLowerCase()} without a selected gene.`}
       </Typography>
       <Typography
-        variant="body1"
+        variant='body1'
         sx={(theme) => ({
           color: theme.palette.text.secondary,
           textAlign: 'center',
@@ -51,7 +64,7 @@ export default function FailedToLoad(props: {
         })}
       >
         Please contact us by opening an issue on{' '}
-        <Link href="https://github.com/BioAnalyticResource/ePlant/issues">
+        <Link href='https://github.com/BioAnalyticResource/ePlant/issues'>
           GitHub
         </Link>
       </Typography>
diff --git a/Eplant/UI/Layout/TabsetPlaceholder.tsx b/Eplant/UI/Layout/TabsetPlaceholder.tsx
index 421ade90..a9800cce 100644
--- a/Eplant/UI/Layout/TabsetPlaceholder.tsx
+++ b/Eplant/UI/Layout/TabsetPlaceholder.tsx
@@ -10,12 +10,12 @@ const Illustration = ({
 }: { color: string } & SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
-    viewBox="0 0 230 410"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    viewBox='0 0 230 410'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
   >
     <path
-      d="M167.727 250.002H116.766C115.086 222.002 122.368 199.604 129.086 174.4C185.086 172.72 234.926 136.88 229.326 75.8408C228.767 71.3603 225.967 67.4424 220.928 66.8799C182.287 65.2002 147.006 82.5599 128.53 112.239C125.17 101.598 119.569 90.9579 113.409 80.3169C111.729 56.2389 105.569 31.0359 84.8495 15.9189C63.0095 -0.3191 34.4515 -0.882105 8.68954 1.35989C4.20904 1.91848 -0.271365 4.7193 0.291135 9.7583C3.08803 42.8013 18.7681 70.8013 50.1271 83.6803C65.8071 89.8405 83.7291 93.1998 100.525 92.0787C116.205 118.399 120.127 142.477 111.724 172.72C111.166 173.841 111.166 174.958 110.603 176.079C91.5641 138.559 53.482 120.638 8.12304 129.599C4.76364 130.158 1.40424 134.08 1.96284 137.997C5.32224 172.158 23.2438 197.357 56.2828 208.557C70.2828 213.596 86.5208 215.838 101.642 214.717C99.9621 225.916 98.8411 233.197 99.9622 249.998H46.7631C27.7241 249.998 5.32214 247.759 5.32214 276.318C5.32214 296.478 19.3221 302.08 33.8811 303.197C41.1623 331.756 45.6432 362.556 57.4011 389.435C65.7996 409.037 86.5222 409.595 106.682 409.595C126.842 409.595 147.561 408.474 155.963 388.876C167.725 361.997 172.201 331.196 179.483 302.638C194.042 301.517 208.042 295.919 208.042 275.759C209.167 247.759 186.769 250.001 167.73 250.001L167.727 250.002ZM212.528 84.2418C212.528 113.922 197.969 136.32 169.407 148.082C158.208 152.562 145.329 155.363 133.009 156.48C134.689 112.804 170.529 85.3632 212.529 84.2422L212.528 84.2418ZM18.2079 17.6008C36.6879 16.4797 55.169 17.6008 71.407 27.1203C88.208 37.1983 94.3679 56.8003 96.0479 75.2803C58.5279 75.8428 24.9269 56.2413 18.2079 17.6003V17.6008ZM98.8489 196.801C89.3294 197.359 80.369 196.242 71.408 194.562C43.967 188.961 25.4859 171.043 20.4469 144.723C59.6459 139.683 89.3259 160.402 101.646 196.8H98.849L98.8489 196.801ZM148.126 362.561C144.767 374.881 141.966 387.76 127.966 391.12C124.607 391.678 91.0049 392.241 87.6459 391.678C73.6459 388.319 70.2869 375.44 66.9269 362.557C60.7667 338.479 57.4074 322.795 52.3679 300.397H162.688C157.645 322.803 154.286 338.483 148.126 362.561V362.561ZM182.849 283.6H32.209C26.6073 283.6 22.1309 280.799 22.1309 275.201C22.1309 269.6 26.6115 266.803 32.209 266.803H182.849C188.451 266.803 192.927 269.604 192.927 275.201C192.927 280.803 188.446 283.6 182.849 283.6Z"
+      d='M167.727 250.002H116.766C115.086 222.002 122.368 199.604 129.086 174.4C185.086 172.72 234.926 136.88 229.326 75.8408C228.767 71.3603 225.967 67.4424 220.928 66.8799C182.287 65.2002 147.006 82.5599 128.53 112.239C125.17 101.598 119.569 90.9579 113.409 80.3169C111.729 56.2389 105.569 31.0359 84.8495 15.9189C63.0095 -0.3191 34.4515 -0.882105 8.68954 1.35989C4.20904 1.91848 -0.271365 4.7193 0.291135 9.7583C3.08803 42.8013 18.7681 70.8013 50.1271 83.6803C65.8071 89.8405 83.7291 93.1998 100.525 92.0787C116.205 118.399 120.127 142.477 111.724 172.72C111.166 173.841 111.166 174.958 110.603 176.079C91.5641 138.559 53.482 120.638 8.12304 129.599C4.76364 130.158 1.40424 134.08 1.96284 137.997C5.32224 172.158 23.2438 197.357 56.2828 208.557C70.2828 213.596 86.5208 215.838 101.642 214.717C99.9621 225.916 98.8411 233.197 99.9622 249.998H46.7631C27.7241 249.998 5.32214 247.759 5.32214 276.318C5.32214 296.478 19.3221 302.08 33.8811 303.197C41.1623 331.756 45.6432 362.556 57.4011 389.435C65.7996 409.037 86.5222 409.595 106.682 409.595C126.842 409.595 147.561 408.474 155.963 388.876C167.725 361.997 172.201 331.196 179.483 302.638C194.042 301.517 208.042 295.919 208.042 275.759C209.167 247.759 186.769 250.001 167.73 250.001L167.727 250.002ZM212.528 84.2418C212.528 113.922 197.969 136.32 169.407 148.082C158.208 152.562 145.329 155.363 133.009 156.48C134.689 112.804 170.529 85.3632 212.529 84.2422L212.528 84.2418ZM18.2079 17.6008C36.6879 16.4797 55.169 17.6008 71.407 27.1203C88.208 37.1983 94.3679 56.8003 96.0479 75.2803C58.5279 75.8428 24.9269 56.2413 18.2079 17.6003V17.6008ZM98.8489 196.801C89.3294 197.359 80.369 196.242 71.408 194.562C43.967 188.961 25.4859 171.043 20.4469 144.723C59.6459 139.683 89.3259 160.402 101.646 196.8H98.849L98.8489 196.801ZM148.126 362.561C144.767 374.881 141.966 387.76 127.966 391.12C124.607 391.678 91.0049 392.241 87.6459 391.678C73.6459 388.319 70.2869 375.44 66.9269 362.557C60.7667 338.479 57.4074 322.795 52.3679 300.397H162.688C157.645 322.803 154.286 338.483 148.126 362.561V362.561ZM182.849 283.6H32.209C26.6073 283.6 22.1309 280.799 22.1309 275.201C22.1309 269.6 26.6115 266.803 32.209 266.803H182.849C188.451 266.803 192.927 269.604 192.927 275.201C192.927 280.803 188.446 283.6 182.849 283.6Z'
       fill={color}
     />
   </svg>
@@ -29,17 +29,17 @@ const Illustration = ({
 export default function TabsetPlaceholder(props: { addTab: () => void }) {
   const theme = useTheme()
   return (
-    <Stack gap={6} direction="column" width="100%">
+    <Stack gap={6} direction='column' width='100%'>
       <Illustration
         color={theme.palette.primary.dark}
         style={{
           maxHeight: '300px',
         }}
       />
-      <Box justifyContent="center" display="flex">
+      <Box justifyContent='center' display='flex'>
         <Button
-          variant="contained"
-          color="primary"
+          variant='contained'
+          color='primary'
           onClick={props.addTab}
           endIcon={<Add />}
         >
diff --git a/Eplant/UI/Layout/ViewContainer/LoadingPage.tsx b/Eplant/UI/Layout/ViewContainer/LoadingPage.tsx
index c03e59df..c8901ed2 100644
--- a/Eplant/UI/Layout/ViewContainer/LoadingPage.tsx
+++ b/Eplant/UI/Layout/ViewContainer/LoadingPage.tsx
@@ -15,13 +15,12 @@ export function LoadingImage(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       {...props}
-      id="loading-plant"
-      fill="#000000"
-      shapeRendering="geometricPrecision"
-      textRendering="geometricPrecision"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 100 101"
-
+      id='loading-plant'
+      fill='#000000'
+      shapeRendering='geometricPrecision'
+      textRendering='geometricPrecision'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 100 101'
     >
       {/* 
       // OLD IMAGE (the watering can)
@@ -48,24 +47,23 @@ export function LoadingImage(props: SVGProps<SVGSVGElement>) {
 
       <style>
         {
-          "@keyframes loading-plant-s-g1_ts__ts{0%,73.666667%,to{transform:translate(50px,96.336008px) scale(1,1)}33.666667%{transform:translate(50px,96.336008px) scale(1,1);animation-timing-function:cubic-bezier(0,0,.58,1)}53.666667%{transform:translate(50px,96.336008px) scale(1.05,1.05)}}@keyframes loading-plant-s-path2_to__to{0%{transform:translate(85.0355px,-14.598999px)}33.333333%,to{transform:translate(85.0355px,35.358801px)}}@keyframes loading-plant-s-path2_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path3_to__to{0%{transform:translate(85.0355px,-39.3128px)}33.333333%,to{transform:translate(85.0355px,10.645px)}}@keyframes loading-plant-s-path3_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path4_to__to{0%{transform:translate(75.025501px,-19.986899px)}33.333333%,to{transform:translate(75.025501px,29.970901px)}}@keyframes loading-plant-s-path4_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path5_to__to{0%{transform:translate(75.025501px,-36.6763px)}33.333333%,to{transform:translate(75.025501px,13.2815px)}}@keyframes loading-plant-s-path5_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path6_to__to{0%{transform:translate(65.015499px,-24.682px)}33.333333%,to{transform:translate(65.015499px,25.2758px)}}@keyframes loading-plant-s-path6_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path7_to__to{0%{transform:translate(65.015499px,-41.7413px)}33.333333%,to{transform:translate(65.015499px,8.2165px)}}@keyframes loading-plant-s-path7_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path8_to__to{0%{transform:translate(55.005499px,-18.7635px)}33.333333%,to{transform:translate(55.005499px,31.1943px)}}@keyframes loading-plant-s-path8_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path9_to__to{0%{transform:translate(55.005499px,-35.5828px)}33.333333%,to{transform:translate(55.005499px,14.375px)}}@keyframes loading-plant-s-path9_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path10_to__to{0%{transform:translate(44.994501px,-24.296001px)}33.333333%,to{transform:translate(44.994501px,25.661799px)}}@keyframes loading-plant-s-path10_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path11_to__to{0%{transform:translate(44.994501px,-40.9208px)}33.333333%,to{transform:translate(44.994501px,9.037px)}}@keyframes loading-plant-s-path11_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path12_to__to{0%{transform:translate(34.984499px,-19.143801px)}33.333333%,to{transform:translate(34.984499px,30.813999px)}}@keyframes loading-plant-s-path12_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path13_to__to{0%{transform:translate(34.984499px,-35.5828px)}33.333333%,to{transform:translate(34.984499px,14.375px)}}@keyframes loading-plant-s-path13_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path14_to__to{0%{transform:translate(24.975px,-22.4964px)}33.333333%,to{transform:translate(24.975px,27.4614px)}}@keyframes loading-plant-s-path14_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path15_to__to{0%{transform:translate(24.975px,-39.6348px)}33.333333%,to{transform:translate(24.975px,10.323px)}}@keyframes loading-plant-s-path15_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path16_to__to{0%{transform:translate(14.9645px,-6.365799px)}33.333333%,to{transform:translate(14.9645px,43.592001px)}}@keyframes loading-plant-s-path16_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path17_to__to{0%{transform:translate(14.9645px,-31.4653px)}33.333333%,to{transform:translate(14.9645px,18.4925px)}}@keyframes loading-plant-s-path17_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}"
+          '@keyframes loading-plant-s-g1_ts__ts{0%,73.666667%,to{transform:translate(50px,96.336008px) scale(1,1)}33.666667%{transform:translate(50px,96.336008px) scale(1,1);animation-timing-function:cubic-bezier(0,0,.58,1)}53.666667%{transform:translate(50px,96.336008px) scale(1.05,1.05)}}@keyframes loading-plant-s-path2_to__to{0%{transform:translate(85.0355px,-14.598999px)}33.333333%,to{transform:translate(85.0355px,35.358801px)}}@keyframes loading-plant-s-path2_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path3_to__to{0%{transform:translate(85.0355px,-39.3128px)}33.333333%,to{transform:translate(85.0355px,10.645px)}}@keyframes loading-plant-s-path3_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path4_to__to{0%{transform:translate(75.025501px,-19.986899px)}33.333333%,to{transform:translate(75.025501px,29.970901px)}}@keyframes loading-plant-s-path4_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path5_to__to{0%{transform:translate(75.025501px,-36.6763px)}33.333333%,to{transform:translate(75.025501px,13.2815px)}}@keyframes loading-plant-s-path5_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path6_to__to{0%{transform:translate(65.015499px,-24.682px)}33.333333%,to{transform:translate(65.015499px,25.2758px)}}@keyframes loading-plant-s-path6_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path7_to__to{0%{transform:translate(65.015499px,-41.7413px)}33.333333%,to{transform:translate(65.015499px,8.2165px)}}@keyframes loading-plant-s-path7_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path8_to__to{0%{transform:translate(55.005499px,-18.7635px)}33.333333%,to{transform:translate(55.005499px,31.1943px)}}@keyframes loading-plant-s-path8_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path9_to__to{0%{transform:translate(55.005499px,-35.5828px)}33.333333%,to{transform:translate(55.005499px,14.375px)}}@keyframes loading-plant-s-path9_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path10_to__to{0%{transform:translate(44.994501px,-24.296001px)}33.333333%,to{transform:translate(44.994501px,25.661799px)}}@keyframes loading-plant-s-path10_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path11_to__to{0%{transform:translate(44.994501px,-40.9208px)}33.333333%,to{transform:translate(44.994501px,9.037px)}}@keyframes loading-plant-s-path11_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path12_to__to{0%{transform:translate(34.984499px,-19.143801px)}33.333333%,to{transform:translate(34.984499px,30.813999px)}}@keyframes loading-plant-s-path12_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path13_to__to{0%{transform:translate(34.984499px,-35.5828px)}33.333333%,to{transform:translate(34.984499px,14.375px)}}@keyframes loading-plant-s-path13_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path14_to__to{0%{transform:translate(24.975px,-22.4964px)}33.333333%,to{transform:translate(24.975px,27.4614px)}}@keyframes loading-plant-s-path14_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path15_to__to{0%{transform:translate(24.975px,-39.6348px)}33.333333%,to{transform:translate(24.975px,10.323px)}}@keyframes loading-plant-s-path15_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path16_to__to{0%{transform:translate(14.9645px,-6.365799px)}33.333333%,to{transform:translate(14.9645px,43.592001px)}}@keyframes loading-plant-s-path16_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path17_to__to{0%{transform:translate(14.9645px,-31.4653px)}33.333333%,to{transform:translate(14.9645px,18.4925px)}}@keyframes loading-plant-s-path17_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}'
         }
       </style>
       <g
         style={{
           animation:
-            "loading-plant-s-g1_ts__ts 3000ms linear infinite normal forwards",
+            'loading-plant-s-g1_ts__ts 3000ms linear infinite normal forwards',
         }}
-        transform="translate(50 96.336)"
+        transform='translate(50 96.336)'
       >
-        <g id="loading-plant-s-g1" transform="translate(-50 -95)">
+        <g id='loading-plant-s-g1' transform='translate(-50 -95)'>
           <path
-            id="loading-plant-s-path1"
-            d="M82.532 93.421h-6.184c-1.915-4.336-5.995-7.333-10.809-7.846a13.186 13.186 0 0 0-1.613-.076c-.503-5.348-4.305-10.038-9.498-11.614a.938.938 0 0 0-.281-.127l.004-.003a16.014 16.014 0 0 0-2.242-.41c-.38-.043-.746-.009-1.12-.024v-8.333c.111.06.22.13.343.13.021 0 .034-.024.056-.024.009 0 .016.012.027.012 0 0 .256.013.716.013 2.488 0 11.003-.416 16.008-5.785 5.845-6.267 4.647-16.65 4.593-17.088a.794.794 0 0 0-.743-.694c.003-.003-10.794-.586-16.725 5.773-3.037 3.257-4.166 7.62-4.549 11.127-.139-.126-.315-.215-.515-.215s-.373.09-.515.213c-.383-3.507-1.512-7.87-4.549-11.127-5.931-6.359-16.724-5.776-16.724-5.773a.792.792 0 0 0-.743.694c-.056.438-1.252 10.821 4.592 17.088 5.005 5.37 13.522 5.785 16.011 5.785.46 0 .716-.013.716-.013.013 0 .019-.012.027-.012.021 0 .034.024.056.024.12 0 .229-.07.34-.126v8.305c-6.069.484-11.097 5.008-12.163 11.222-5.928-.259-11.456 3.343-13.511 8.903h-6.068a.79.79 0 0 0 0 1.58h65.063a.79.79 0 0 0 0-1.579ZM56.217 48.402c4.54-4.869 12.413-5.279 14.806-5.285.154 2.355.297 10.275-4.237 15.136-4.089 4.388-10.849 5.15-13.905 5.261l8.493-9.798a.786.786 0 0 0-.077-1.113.793.793 0 0 0-1.113.077l-8.25 9.52c-.05-3.229.394-9.628 4.283-13.798Zm-17.59 5.314 8.496 9.801c-3.057-.114-9.816-.876-13.908-5.264-4.524-4.852-4.389-12.78-4.234-15.136 2.393.006 10.263.416 14.803 5.285 3.879 4.16 4.329 10.563 4.283 13.791l-8.249-9.514a.787.787 0 0 0-1.113-.077.787.787 0 0 0-.078 1.114ZM25.246 93.421c2.051-4.805 7.053-7.842 12.394-7.27a.8.8 0 0 0 .867-.695c.783-6.648 6.596-11.277 13.224-10.544.69.081 1.344.198 1.899.34.077.05.16.093.225.111 4.87 1.421 8.383 5.936 8.543 10.98a.776.776 0 0 0 .259.557c.157.142.364.2.58.207.752-.047 1.538-.034 2.121.04 4.021.426 7.454 2.8 9.249 6.275H25.246Z"
+            id='loading-plant-s-path1'
+            d='M82.532 93.421h-6.184c-1.915-4.336-5.995-7.333-10.809-7.846a13.186 13.186 0 0 0-1.613-.076c-.503-5.348-4.305-10.038-9.498-11.614a.938.938 0 0 0-.281-.127l.004-.003a16.014 16.014 0 0 0-2.242-.41c-.38-.043-.746-.009-1.12-.024v-8.333c.111.06.22.13.343.13.021 0 .034-.024.056-.024.009 0 .016.012.027.012 0 0 .256.013.716.013 2.488 0 11.003-.416 16.008-5.785 5.845-6.267 4.647-16.65 4.593-17.088a.794.794 0 0 0-.743-.694c.003-.003-10.794-.586-16.725 5.773-3.037 3.257-4.166 7.62-4.549 11.127-.139-.126-.315-.215-.515-.215s-.373.09-.515.213c-.383-3.507-1.512-7.87-4.549-11.127-5.931-6.359-16.724-5.776-16.724-5.773a.792.792 0 0 0-.743.694c-.056.438-1.252 10.821 4.592 17.088 5.005 5.37 13.522 5.785 16.011 5.785.46 0 .716-.013.716-.013.013 0 .019-.012.027-.012.021 0 .034.024.056.024.12 0 .229-.07.34-.126v8.305c-6.069.484-11.097 5.008-12.163 11.222-5.928-.259-11.456 3.343-13.511 8.903h-6.068a.79.79 0 0 0 0 1.58h65.063a.79.79 0 0 0 0-1.579ZM56.217 48.402c4.54-4.869 12.413-5.279 14.806-5.285.154 2.355.297 10.275-4.237 15.136-4.089 4.388-10.849 5.15-13.905 5.261l8.493-9.798a.786.786 0 0 0-.077-1.113.793.793 0 0 0-1.113.077l-8.25 9.52c-.05-3.229.394-9.628 4.283-13.798Zm-17.59 5.314 8.496 9.801c-3.057-.114-9.816-.876-13.908-5.264-4.524-4.852-4.389-12.78-4.234-15.136 2.393.006 10.263.416 14.803 5.285 3.879 4.16 4.329 10.563 4.283 13.791l-8.249-9.514a.787.787 0 0 0-1.113-.077.787.787 0 0 0-.078 1.114ZM25.246 93.421c2.051-4.805 7.053-7.842 12.394-7.27a.8.8 0 0 0 .867-.695c.783-6.648 6.596-11.277 13.224-10.544.69.081 1.344.198 1.899.34.077.05.16.093.225.111 4.87 1.421 8.383 5.936 8.543 10.98a.776.776 0 0 0 .259.557c.157.142.364.2.58.207.752-.047 1.538-.034 2.121.04 4.021.426 7.454 2.8 9.249 6.275H25.246Z'
           />
         </g>
       </g>
-
     </svg>
   )
 }
@@ -91,8 +89,8 @@ export default function LoadingPage(props: {
     return <FailedToLoad geneticElement={props.gene} view={props.view} />
   return (
     <Stack gap={4}>
-      <LinearProgress variant="determinate" value={props.loadingAmount * 100} />
-      <Box display="flex" alignItems={'center'} justifyContent={'center'}>
+      <LinearProgress variant='determinate' value={props.loadingAmount * 100} />
+      <Box display='flex' alignItems={'center'} justifyContent={'center'}>
         <LoadingImage
           style={{
             marginTop: '80px',
@@ -102,7 +100,7 @@ export default function LoadingPage(props: {
           fill={theme.palette.primary.dark}
         />
       </Box>
-      <Typography variant="h5" align="center">
+      <Typography variant='h5' align='center'>
         Loading{' '}
         {props.gene
           ? props.gene.id + ' data for ' + props.view.name
diff --git a/Eplant/UI/Layout/ViewContainer/ViewOptions.tsx b/Eplant/UI/Layout/ViewContainer/ViewOptions.tsx
index bb87723e..615e76f3 100644
--- a/Eplant/UI/Layout/ViewContainer/ViewOptions.tsx
+++ b/Eplant/UI/Layout/ViewContainer/ViewOptions.tsx
@@ -22,8 +22,8 @@ export default function ViewOptions<T, S, A>({
   return (
     <>
       <Dropdown
-        variant="text"
-        color="secondary"
+        variant='text'
+        color='secondary'
         sx={{
           color: 'secondary.contrastText',
         }}
diff --git a/Eplant/UI/Layout/ViewContainer/index.tsx b/Eplant/UI/Layout/ViewContainer/index.tsx
index d40601a6..be562932 100644
--- a/Eplant/UI/Layout/ViewContainer/index.tsx
+++ b/Eplant/UI/Layout/ViewContainer/index.tsx
@@ -69,16 +69,25 @@ export function ViewContainer<T, S, A>({
   const topBar = React.useMemo(
     () => (
       <AppBar
-        variant="elevation"
+        variant='elevation'
         sx={(theme) => ({
           background: theme.palette.background.active,
         })}
-        position="sticky"
+        position='sticky'
         elevation={0}
       >
-        <Toolbar sx={(theme) => ({ gap: '8px', paddingRight: 16, borderStyle: 'solid', borderWidth: '1px 0px 1px 1px', borderColor: theme.palette.background.edge, borderLeftColor: theme.palette.background.edgeLight })}>
+        <Toolbar
+          sx={(theme) => ({
+            gap: '8px',
+            paddingRight: 16,
+            borderStyle: 'solid',
+            borderWidth: '1px 0px 1px 1px',
+            borderColor: theme.palette.background.edge,
+            borderLeftColor: theme.palette.background.edgeLight,
+          })}
+        >
           <Stack
-            direction="row"
+            direction='row'
             gap={2}
             sx={{
               flexGrow: 1,
@@ -87,7 +96,7 @@ export function ViewContainer<T, S, A>({
             }}
           >
             {/* View selector dropdown */}
-            <FormControl variant="standard">
+            <FormControl variant='standard'>
               <Select
                 value={view.id}
                 renderValue={() => {
@@ -123,7 +132,9 @@ export function ViewContainer<T, S, A>({
                 inputProps={{
                   sx: (theme: {
                     shape: any
-                    palette: { background: { paperOverlay: any, edgeLight: any } }
+                    palette: {
+                      background: { paperOverlay: any; edgeLight: any }
+                    }
                   }) => ({
                     display: 'flex',
                     alignItems: 'center',
@@ -145,7 +156,7 @@ export function ViewContainer<T, S, A>({
                   }),
                 }}
               >
-                <MenuItem disabled value="">
+                <MenuItem disabled value=''>
                   Select a view
                 </MenuItem>
                 {userViews.map((view) => (
@@ -192,12 +203,12 @@ export function ViewContainer<T, S, A>({
             dispatch={dispatch}
           />
           <Button
-            variant="text"
+            variant='text'
             sx={{
               color: 'secondary.contrastText',
             }}
             disabled={loading}
-            color="secondary"
+            color='secondary'
             onClick={() => {
               setViewingCitations(true)
             }}
@@ -205,12 +216,12 @@ export function ViewContainer<T, S, A>({
             Data sources
           </Button>
           <Button
-            variant="text"
+            variant='text'
             sx={{
               color: 'secondary.contrastText',
             }}
             disabled={loading}
-            color="secondary"
+            color='secondary'
             onClick={() => {
               downloadFile(
                 `${view.id}${gene ? '-' + gene.id : ''}.json`,
@@ -226,16 +237,14 @@ export function ViewContainer<T, S, A>({
     [view.id, gene?.id, loading, activeData, state, dispatch],
   )
   return (
-    <Box {...props} display="flex" flexDirection="column">
+    <Box {...props} display='flex' flexDirection='column'>
       <Modal open={viewingCitations} onClose={() => setViewingCitations(false)}>
-        <DialogTitle sx={{minWidth: '512px'}}>
-          <Typography variant="h6">
-            Data sources for {view.name}
-          </Typography>
+        <DialogTitle sx={{ minWidth: '512px' }}>
+          <Typography variant='h6'>Data sources for {view.name}</Typography>
         </DialogTitle>
         <DialogContent>
           {view.citation ? (
-            <view.citation gene={gene} />
+            <view.citation state={state} activeData={activeData} gene={gene} />
           ) : (
             <Box>No information provided for this view</Box>
           )}
diff --git a/Eplant/UI/Layout/ViewNotSupported.tsx b/Eplant/UI/Layout/ViewNotSupported.tsx
index 0cef9c1c..9e6f32ca 100644
--- a/Eplant/UI/Layout/ViewNotSupported.tsx
+++ b/Eplant/UI/Layout/ViewNotSupported.tsx
@@ -9,14 +9,14 @@ const Illustration = ({
   ...props
 }: { color: string } & SVGProps<SVGSVGElement>) => (
   <svg
-    width="204"
-    height="200"
-    viewBox="0 0 204 386"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    width='204'
+    height='200'
+    viewBox='0 0 204 386'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
   >
     <path
-      d="M196.053 220.328H98.3851C102.003 213.092 107.791 201.518 110.683 187.773C112.13 183.432 112.854 178.367 112.854 174.028L156.262 130.619C159.156 127.725 159.156 123.384 156.262 120.493C153.368 117.598 149.026 117.598 146.135 120.493L112.857 153.771C110.686 137.132 104.175 122.663 92.5998 111.086C87.5349 105.297 83.1938 100.235 80.302 94.4469L115.027 59.7216C117.922 56.8274 117.922 52.4859 115.027 49.5947C112.133 46.7005 107.792 46.7005 104.9 49.5947L75.2344 79.2524C65.8312 43.8035 91.8762 13.4166 93.3207 11.9693C96.2149 9.07511 95.4914 4.73359 92.5971 1.84246C89.7029 -1.05177 85.3614 -0.328197 82.4703 2.56604C82.4703 2.56604 61.4901 25.7171 58.5955 57.5485L42.6801 35.8447C40.5095 32.9505 35.4444 32.2269 32.5533 34.3976C29.659 36.5682 28.9354 41.6333 31.1061 44.5272L61.4902 84.3173C65.108 95.8915 71.6171 108.192 83.194 120.49C99.833 137.853 101.28 159.556 98.3857 178.366L58.5956 155.939V155.215L44.1269 113.978C42.6797 110.36 38.3384 108.189 34.7209 109.637C31.1033 111.084 28.9324 115.425 30.3796 119.043L39.7856 145.088L15.1872 131.34C12.2956 129.893 7.95416 130.617 5.78392 134.235C3.61367 137.852 5.06034 142.194 8.67815 144.361L94.7691 192.832C89.7042 208.747 82.4713 219.601 82.4713 219.601L7.95037 219.603C3.60905 219.603 0.7146 222.497 0.7146 226.839V277.48C0.7146 281.822 3.60884 284.716 7.95037 284.716H18.8009L31.8223 379.488C32.5459 383.106 35.4402 386 39.0581 386H164.939C168.557 386 171.451 383.106 172.175 379.488L185.196 284.716L196.05 284.713C200.391 284.713 203.285 281.819 203.285 277.478V226.836C203.285 223.218 200.391 220.327 196.05 220.327L196.053 220.328ZM158.433 372.252H45.5735L33.2757 285.435H170.734L158.433 372.252ZM188.82 270.969H15.1867V234.797H188.813L188.82 270.969Z"
+      d='M196.053 220.328H98.3851C102.003 213.092 107.791 201.518 110.683 187.773C112.13 183.432 112.854 178.367 112.854 174.028L156.262 130.619C159.156 127.725 159.156 123.384 156.262 120.493C153.368 117.598 149.026 117.598 146.135 120.493L112.857 153.771C110.686 137.132 104.175 122.663 92.5998 111.086C87.5349 105.297 83.1938 100.235 80.302 94.4469L115.027 59.7216C117.922 56.8274 117.922 52.4859 115.027 49.5947C112.133 46.7005 107.792 46.7005 104.9 49.5947L75.2344 79.2524C65.8312 43.8035 91.8762 13.4166 93.3207 11.9693C96.2149 9.07511 95.4914 4.73359 92.5971 1.84246C89.7029 -1.05177 85.3614 -0.328197 82.4703 2.56604C82.4703 2.56604 61.4901 25.7171 58.5955 57.5485L42.6801 35.8447C40.5095 32.9505 35.4444 32.2269 32.5533 34.3976C29.659 36.5682 28.9354 41.6333 31.1061 44.5272L61.4902 84.3173C65.108 95.8915 71.6171 108.192 83.194 120.49C99.833 137.853 101.28 159.556 98.3857 178.366L58.5956 155.939V155.215L44.1269 113.978C42.6797 110.36 38.3384 108.189 34.7209 109.637C31.1033 111.084 28.9324 115.425 30.3796 119.043L39.7856 145.088L15.1872 131.34C12.2956 129.893 7.95416 130.617 5.78392 134.235C3.61367 137.852 5.06034 142.194 8.67815 144.361L94.7691 192.832C89.7042 208.747 82.4713 219.601 82.4713 219.601L7.95037 219.603C3.60905 219.603 0.7146 222.497 0.7146 226.839V277.48C0.7146 281.822 3.60884 284.716 7.95037 284.716H18.8009L31.8223 379.488C32.5459 383.106 35.4402 386 39.0581 386H164.939C168.557 386 171.451 383.106 172.175 379.488L185.196 284.716L196.05 284.713C200.391 284.713 203.285 281.819 203.285 277.478V226.836C203.285 223.218 200.391 220.327 196.05 220.327L196.053 220.328ZM158.433 372.252H45.5735L33.2757 285.435H170.734L158.433 372.252ZM188.82 270.969H15.1867V234.797H188.813L188.82 270.969Z'
       fill={color}
     />
   </svg>
@@ -33,16 +33,16 @@ export default function NotSupported(props: {
   return (
     <Stack
       gap={2}
-      alignItems="center"
-      textAlign="center"
-      justifyContent="center"
-      direction="column"
-      width="100%"
-      minHeight="70vh"
+      alignItems='center'
+      textAlign='center'
+      justifyContent='center'
+      direction='column'
+      width='100%'
+      minHeight='70vh'
     >
       <Illustration color={theme.palette.primary.dark} />
 
-      <Typography variant="h6">
+      <Typography variant='h6'>
         {props.geneticElement
           ? `Cannot view ${props.view.name.toLowerCase()} for ${
               props.geneticElement.id
@@ -50,7 +50,7 @@ export default function NotSupported(props: {
           : `There is no gene selected`}
       </Typography>
       <Typography
-        variant="body1"
+        variant='body1'
         sx={(theme) => ({
           color: theme.palette.text.secondary,
         })}
diff --git a/Eplant/UI/LeftNav/Collections.tsx b/Eplant/UI/LeftNav/Collections.tsx
index cb957339..ef85529d 100644
--- a/Eplant/UI/LeftNav/Collections.tsx
+++ b/Eplant/UI/LeftNav/Collections.tsx
@@ -142,7 +142,7 @@ export function Collection({
 
   return (
     <Stack
-      direction="column"
+      direction='column'
       spacing={1}
       style={{
         justifyContent: 'center',
@@ -163,7 +163,7 @@ export function Collection({
           onClick={() => setOpen(!open)}
           onMouseOver={() => setHover(true)}
           onMouseLeave={() => setHover(false)}
-          direction="row"
+          direction='row'
           gap={1}
           ref={setTopRef}
           sx={(theme) => ({
@@ -186,7 +186,7 @@ export function Collection({
               display: renaming ? undefined : 'none',
               maxHeight: '100%',
             }}
-            size="small"
+            size='small'
             inputRef={inputRef}
             onKeyPress={(e) => {
               if (e.key == 'Enter') rename()
@@ -216,7 +216,7 @@ export function Collection({
           </Typography>
           <div style={{ flex: 1 }} />
           {renaming ? (
-            <IconButton color="primary" onClick={rename}>
+            <IconButton color='primary' onClick={rename}>
               <Check></Check>
             </IconButton>
           ) : (
@@ -239,7 +239,7 @@ export function Collection({
       <Collapse in={open} sx={{ marginTop: '0px !important' }}>
         <SortableContext items={genes} strategy={verticalListSortingStrategy}>
           <Stack
-            direction="column"
+            direction='column'
             spacing={1}
             paddingBottom={2}
             ref={setBottomRef}
@@ -256,10 +256,10 @@ export function Collection({
                 ></SortableGeneticElement>
               ))
             ) : (
-              <Stack spacing={1} direction="row">
+              <Stack spacing={1} direction='row'>
                 <Typography
-                  variant="caption"
-                  fontStyle="italic"
+                  variant='caption'
+                  fontStyle='italic'
                   sx={(theme) => ({
                     color: theme.palette.background.hover,
                     padding: '0.25rem 0.75rem',
@@ -400,7 +400,7 @@ export function Collections(props: {
         handleDrag(ev, { finished: true, swapWithinCollection: true })
       }
     >
-      <Stack direction="column" spacing={2}>
+      <Stack direction='column' spacing={2}>
         {collections.map((p, i) => (
           <Collection
             key={i}
@@ -443,9 +443,9 @@ export function Collections(props: {
         ))}
         <Button
           startIcon={<Add />}
-          variant="text"
-          color="secondary"
-          size="small"
+          variant='text'
+          color='secondary'
+          size='small'
           sx={(theme) => ({
             alignSelf: 'start',
           })}
diff --git a/Eplant/UI/LeftNav/GeneSearch/SearchBar.tsx b/Eplant/UI/LeftNav/GeneSearch/SearchBar.tsx
index fcd627b5..bd1854c6 100644
--- a/Eplant/UI/LeftNav/GeneSearch/SearchBar.tsx
+++ b/Eplant/UI/LeftNav/GeneSearch/SearchBar.tsx
@@ -60,7 +60,7 @@ export default function SearchBar(props: {
       options={options}
       freeSolo
       multiple
-      size="small"
+      size='small'
       disableClearable
       onInputChange={(event, value) => setInputValue(value)}
       sx={props.sx}
@@ -70,7 +70,7 @@ export default function SearchBar(props: {
         value.map((option: string, index: number) => (
           <Chip
             label={option}
-            size="small"
+            size='small'
             {...getTagProps({ index })}
             key={index}
             deleteIcon={<CloseIcon />}
@@ -85,7 +85,7 @@ export default function SearchBar(props: {
           })}
           placeholder={props.placeholder}
           label={props.label}
-          variant="outlined"
+          variant='outlined'
           {...params}
           InputProps={{
             ...InputProps,
@@ -101,7 +101,7 @@ export default function SearchBar(props: {
 
             endAdornment: (
               <InputAdornment
-                position="end"
+                position='end'
                 sx={{
                   position: 'absolute',
                   right: '4px',
@@ -123,7 +123,7 @@ export default function SearchBar(props: {
             ),
           }}
           {...params}
-          size="medium"
+          size='medium'
         />
       )}
     />
diff --git a/Eplant/UI/LeftNav/GeneSearch/index.tsx b/Eplant/UI/LeftNav/GeneSearch/index.tsx
index b5c54fc7..755c8844 100644
--- a/Eplant/UI/LeftNav/GeneSearch/index.tsx
+++ b/Eplant/UI/LeftNav/GeneSearch/index.tsx
@@ -35,17 +35,17 @@ export function SearchGroup({
     if (!species && speciesList.length) setSpecies(speciesList[0])
   }, [species])
   return (
-    <Stack direction="column" spacing={2}>
+    <Stack direction='column' spacing={2}>
       {/* Species selector */}
       <TextField
         select
-        size="small"
+        size='small'
         value={species?.name ?? ''}
         onChange={(e) =>
           setSpecies(speciesList.find((s) => s.name == e.target.value))
         }
         // label="Species"
-        variant="standard"
+        variant='standard'
         inputProps={{
           sx: {
             ':focus': {
@@ -62,8 +62,8 @@ export function SearchGroup({
       </TextField>
 
       {/* Gene selector */}
-      <SearchBar 
-        label="Search for genes"
+      <SearchBar
+        label='Search for genes'
         inputProps={{
           // TODO: Make these clickable
           helperText: <span>Example ABI3 or AT5G60200</span>,
diff --git a/Eplant/UI/LeftNav/index.tsx b/Eplant/UI/LeftNav/index.tsx
index 848acbbd..9cdd65db 100644
--- a/Eplant/UI/LeftNav/index.tsx
+++ b/Eplant/UI/LeftNav/index.tsx
@@ -30,8 +30,8 @@ export function LeftNav(props: {
     if (uniq.length != geneticElements.length) setGeneticElements(uniq)
   }, [geneticElements])
   return (
-    <Stack gap={2} direction="column" height={'100%'}>
-      <LogoWithText text="ePlant" />
+    <Stack gap={2} direction='column' height={'100%'}>
+      <LogoWithText text='ePlant' />
       <SearchGroup
         addGeneticElements={(s) => {
           setGeneticElements(
@@ -66,7 +66,7 @@ export function LeftNav(props: {
               checked={darkMode}
             />
           }
-          label="Dark mode"
+          label='Dark mode'
         />
       </FormGroup>
     </Stack>
diff --git a/Eplant/UI/Logo.tsx b/Eplant/UI/Logo.tsx
index 38c69497..e38c4519 100644
--- a/Eplant/UI/Logo.tsx
+++ b/Eplant/UI/Logo.tsx
@@ -10,18 +10,18 @@ import { SVGProps } from 'react'
 export function Logo(props: SVGProps<SVGSVGElement>) {
   const theme = useTheme()
   return (
-    <a href="http://bar.utoronto.ca/" rel="noreferrer" target="_blank">
+    <a href='http://bar.utoronto.ca/' rel='noreferrer' target='_blank'>
       <svg
         {...props}
-        width="42"
-        height="42"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+        width='42'
+        height='42'
+        viewBox='0 0 24 24'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
       >
-        <circle cx="12" cy="12" r="12" fill={theme.palette.primary.main} />
+        <circle cx='12' cy='12' r='12' fill={theme.palette.primary.main} />
         <path
-          d="M6.07617 12.1919H4.43262L4.42383 11.2866H5.80371C6.04688 11.2866 6.24609 11.2559 6.40137 11.1943C6.55664 11.1299 6.67236 11.0376 6.74854 10.9175C6.82764 10.7944 6.86719 10.645 6.86719 10.4692C6.86719 10.27 6.8291 10.1089 6.75293 9.98584C6.67969 9.86279 6.56396 9.77344 6.40576 9.71777C6.25049 9.66211 6.0498 9.63428 5.80371 9.63428H4.88965V15H3.57129V8.60156H5.80371C6.17578 8.60156 6.5083 8.63672 6.80127 8.70703C7.09717 8.77734 7.34766 8.88428 7.55273 9.02783C7.75781 9.17139 7.91455 9.35303 8.02295 9.57275C8.13135 9.78955 8.18555 10.0474 8.18555 10.3462C8.18555 10.6099 8.12549 10.853 8.00537 11.0757C7.88818 11.2983 7.70215 11.48 7.44727 11.6206C7.19531 11.7612 6.86572 11.8389 6.4585 11.8535L6.07617 12.1919ZM6.01904 15H4.07227L4.58643 13.9717H6.01904C6.25049 13.9717 6.43945 13.9351 6.58594 13.8618C6.73242 13.7856 6.84082 13.6831 6.91113 13.5542C6.98145 13.4253 7.0166 13.2773 7.0166 13.1104C7.0166 12.9229 6.98438 12.7603 6.91992 12.6226C6.8584 12.4849 6.75879 12.3794 6.62109 12.3062C6.4834 12.23 6.30176 12.1919 6.07617 12.1919H4.80615L4.81494 11.2866H6.39697L6.7002 11.6426C7.08984 11.6367 7.40332 11.7056 7.64062 11.8491C7.88086 11.9897 8.05518 12.1729 8.16357 12.3984C8.2749 12.624 8.33057 12.8657 8.33057 13.1235C8.33057 13.5337 8.24121 13.8794 8.0625 14.1606C7.88379 14.439 7.62158 14.6484 7.27588 14.7891C6.93311 14.9297 6.51416 15 6.01904 15ZM12.0709 9.6958L10.3307 15H8.92881L11.3063 8.60156H12.1983L12.0709 9.6958ZM13.5167 15L11.7721 9.6958L11.6314 8.60156H12.5323L14.9229 15H13.5167ZM13.4376 12.6182V13.6509H10.0582V12.6182H13.4376ZM15.6662 8.60156H18.0524C18.5417 8.60156 18.9621 8.6748 19.3137 8.82129C19.6682 8.96777 19.9406 9.18457 20.1311 9.47168C20.3215 9.75879 20.4167 10.1118 20.4167 10.5308C20.4167 10.8735 20.3581 11.168 20.2409 11.4141C20.1267 11.6572 19.9641 11.8608 19.7531 12.0249C19.5451 12.186 19.3005 12.3149 19.0192 12.4116L18.6018 12.6313H16.5275L16.5188 11.603H18.0612C18.2927 11.603 18.4846 11.562 18.6369 11.48C18.7893 11.3979 18.9035 11.2837 18.9797 11.1372C19.0588 10.9907 19.0983 10.8208 19.0983 10.6274C19.0983 10.4224 19.0603 10.2451 18.9841 10.0957C18.9079 9.94629 18.7922 9.83203 18.6369 9.75293C18.4816 9.67383 18.2868 9.63428 18.0524 9.63428H16.9846V15H15.6662V8.60156ZM19.2434 15L17.7844 12.1479L19.1774 12.1392L20.654 14.9385V15H19.2434Z"
+          d='M6.07617 12.1919H4.43262L4.42383 11.2866H5.80371C6.04688 11.2866 6.24609 11.2559 6.40137 11.1943C6.55664 11.1299 6.67236 11.0376 6.74854 10.9175C6.82764 10.7944 6.86719 10.645 6.86719 10.4692C6.86719 10.27 6.8291 10.1089 6.75293 9.98584C6.67969 9.86279 6.56396 9.77344 6.40576 9.71777C6.25049 9.66211 6.0498 9.63428 5.80371 9.63428H4.88965V15H3.57129V8.60156H5.80371C6.17578 8.60156 6.5083 8.63672 6.80127 8.70703C7.09717 8.77734 7.34766 8.88428 7.55273 9.02783C7.75781 9.17139 7.91455 9.35303 8.02295 9.57275C8.13135 9.78955 8.18555 10.0474 8.18555 10.3462C8.18555 10.6099 8.12549 10.853 8.00537 11.0757C7.88818 11.2983 7.70215 11.48 7.44727 11.6206C7.19531 11.7612 6.86572 11.8389 6.4585 11.8535L6.07617 12.1919ZM6.01904 15H4.07227L4.58643 13.9717H6.01904C6.25049 13.9717 6.43945 13.9351 6.58594 13.8618C6.73242 13.7856 6.84082 13.6831 6.91113 13.5542C6.98145 13.4253 7.0166 13.2773 7.0166 13.1104C7.0166 12.9229 6.98438 12.7603 6.91992 12.6226C6.8584 12.4849 6.75879 12.3794 6.62109 12.3062C6.4834 12.23 6.30176 12.1919 6.07617 12.1919H4.80615L4.81494 11.2866H6.39697L6.7002 11.6426C7.08984 11.6367 7.40332 11.7056 7.64062 11.8491C7.88086 11.9897 8.05518 12.1729 8.16357 12.3984C8.2749 12.624 8.33057 12.8657 8.33057 13.1235C8.33057 13.5337 8.24121 13.8794 8.0625 14.1606C7.88379 14.439 7.62158 14.6484 7.27588 14.7891C6.93311 14.9297 6.51416 15 6.01904 15ZM12.0709 9.6958L10.3307 15H8.92881L11.3063 8.60156H12.1983L12.0709 9.6958ZM13.5167 15L11.7721 9.6958L11.6314 8.60156H12.5323L14.9229 15H13.5167ZM13.4376 12.6182V13.6509H10.0582V12.6182H13.4376ZM15.6662 8.60156H18.0524C18.5417 8.60156 18.9621 8.6748 19.3137 8.82129C19.6682 8.96777 19.9406 9.18457 20.1311 9.47168C20.3215 9.75879 20.4167 10.1118 20.4167 10.5308C20.4167 10.8735 20.3581 11.168 20.2409 11.4141C20.1267 11.6572 19.9641 11.8608 19.7531 12.0249C19.5451 12.186 19.3005 12.3149 19.0192 12.4116L18.6018 12.6313H16.5275L16.5188 11.603H18.0612C18.2927 11.603 18.4846 11.562 18.6369 11.48C18.7893 11.3979 18.9035 11.2837 18.9797 11.1372C19.0588 10.9907 19.0983 10.8208 19.0983 10.6274C19.0983 10.4224 19.0603 10.2451 18.9841 10.0957C18.9079 9.94629 18.7922 9.83203 18.6369 9.75293C18.4816 9.67383 18.2868 9.63428 18.0524 9.63428H16.9846V15H15.6662V8.60156ZM19.2434 15L17.7844 12.1479L19.1774 12.1392L20.654 14.9385V15H19.2434Z'
           fill={theme.palette.background.default}
         />
       </svg>
@@ -44,7 +44,7 @@ export function LogoWithText({
     <Stack direction={'row'} gap={'12px'} style={{ alignItems: 'center' }}>
       <Logo {...props}></Logo>
       <Typography
-        variant="h6"
+        variant='h6'
         color={theme.palette.primary.main}
         sx={{ paddingBottom: 1 }}
       >
diff --git a/Eplant/UI/Modal.tsx b/Eplant/UI/Modal.tsx
index 840f1cc5..4dcadde7 100644
--- a/Eplant/UI/Modal.tsx
+++ b/Eplant/UI/Modal.tsx
@@ -8,7 +8,7 @@ const Transition = React.forwardRef(function Transition(
   },
   ref: React.Ref<unknown>,
 ) {
-  return <Slide direction="up" ref={ref} {...props} />
+  return <Slide direction='up' ref={ref} {...props} />
 })
 
 export default function Modal(
diff --git a/Eplant/View/index.ts b/Eplant/View/index.ts
index 339b5662..a3770972 100644
--- a/Eplant/View/index.ts
+++ b/Eplant/View/index.ts
@@ -58,7 +58,11 @@ export interface View<Data = any, State = any, Action = any> {
   /**
    * The react component that renders citations for a gene
    */
-  citation?: (props: { gene: GeneticElement | null }) => JSX.Element
+  citation?: (props: {
+    state?: State
+    activeData?: Data
+    gene?: GeneticElement | null
+  }) => JSX.Element
   /**
    * Return the title of this view's tab
    */
diff --git a/Eplant/main.tsx b/Eplant/main.tsx
index 9e858f83..5fa31063 100644
--- a/Eplant/main.tsx
+++ b/Eplant/main.tsx
@@ -67,7 +67,7 @@ const registerServiceWorker = async () => {
   if ('serviceWorker' in navigator) {
     try {
       const registration = await navigator.serviceWorker.register(
-        import.meta.env.BASE_URL + '/sw.js'
+        import.meta.env.BASE_URL + '/sw.js',
       )
       if (registration.installing) {
         console.log('Service worker installing')
diff --git a/Eplant/state/index.tsx b/Eplant/state/index.tsx
index 54500814..6ffa632b 100644
--- a/Eplant/state/index.tsx
+++ b/Eplant/state/index.tsx
@@ -2,9 +2,16 @@ import GeneticElement from '@eplant/GeneticElement'
 import { Species } from '@eplant/GeneticElement'
 import arabidopsis from '@eplant/Species/arabidopsis'
 import Storage from '@eplant/util/Storage'
-import { atom, useAtom, useAtomValue, useSetAtom, WritableAtom } from 'jotai'
-import * as React from 'react'
+import {
+  atom,
+  SetStateAction,
+  useAtom,
+  useAtomValue,
+  useSetAtom,
+  WritableAtom,
+} from 'jotai'
 import * as FlexLayout from 'flexlayout-react'
+import { useState, useEffect, createContext, useContext } from 'react'
 
 const persistAtom = atom<boolean>(true)
 export const useSetPersist = () => useSetAtom(persistAtom)
@@ -38,8 +45,8 @@ export const pageLoad = (() => {
 })()
 
 export const usePageLoad = () => {
-  const [progress, setProgress] = React.useState(0)
-  React.useEffect(() => pageLoad.watch(setProgress), [])
+  const [progress, setProgress] = useState(0)
+  useEffect(() => pageLoad.watch(setProgress), [])
   return [progress, progress == 1] as [number, boolean]
 }
 
@@ -74,7 +81,7 @@ export function atomWithStorage<T>(
       //throw loadedValue
       return get(val)
     },
-    (get, set, x: React.SetStateAction<T>) => {
+    (get, set, x: SetStateAction<T>) => {
       const newValue =
         typeof x == 'function' ? (x as (prev: T) => T)(get(val)) : x
       if (get(persistAtom)) {
@@ -118,7 +125,7 @@ function atomWithOptionalStorage<T>(
     (get) => {
       return get(val)
     },
-    (get, set, x: React.SetStateAction<T>) => {
+    (get, set, x: SetStateAction<T>) => {
       const newValue =
         typeof x == 'function' ? (x as (prev: T) => T)(get(val)) : x
       if (get(persistAtom)) {
@@ -131,7 +138,7 @@ function atomWithOptionalStorage<T>(
 }
 
 function useAtomReducer<T, A>(
-  atom: WritableAtom<T, [React.SetStateAction<T>], void>,
+  atom: WritableAtom<T, [SetStateAction<T>], void>,
   reducer: (x: T, action: A) => T,
 ): (action: A) => void {
   const setValue = useSetAtom(atom)
@@ -147,6 +154,22 @@ export const genesAtom = atomWithOptionalStorage<GeneticElement[]>(
 export const useGeneticElements = () => useAtom(genesAtom)
 export const useSetGeneticElements = () => useSetAtom(genesAtom)
 
+const fetchCitations = () => {
+  return fetch('https://bar.utoronto.ca/eplant/data/citations.json')
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`)
+      }
+      return response.json()
+    })
+    .catch((error) => {
+      console.error('Error fetching citations:', error)
+      throw error
+    })
+}
+export const citationsAtom = atom(await fetchCitations())
+export const useCitations = () => useAtom(citationsAtom)
+
 export const collectionsAtom = atomWithOptionalStorage<
   { genes: string[]; name: string; open: boolean }[]
 >(
@@ -260,8 +283,8 @@ export const usePanes = () =>
   ]
 export const usePanesDispatch = () => useAtomReducer(panesAtom, panesReducer)
 
-export const ViewIDContext = React.createContext<string>('')
-export const useViewID = () => React.useContext(ViewIDContext)
+export const ViewIDContext = createContext<string>('')
+export const useViewID = () => useContext(ViewIDContext)
 
 export const printingAtom = atom<string | null>(null)
 export const usePrinting = () => useAtom(printingAtom)
diff --git a/Eplant/theme.tsx b/Eplant/theme.tsx
index e740d0e5..fa00423e 100644
--- a/Eplant/theme.tsx
+++ b/Eplant/theme.tsx
@@ -45,7 +45,7 @@ export const light = createTheme({
       selected: '#dddddd', // is this used?
       hover: '#cccccc', // hovered gene
       edge: '#DDDDDD', // borders around EFP canvas
-      edgeLight: '#EEEEEE' // lighter borders around page views
+      edgeLight: '#EEEEEE', // lighter borders around page views
     },
     hot: {
       main: '#ff0000',
@@ -83,7 +83,7 @@ export const dark = createTheme({
       active: '#3a3a3a',
       hover: '#444444',
       edge: '#444444',
-      edgeLight: '#333333'
+      edgeLight: '#333333',
     },
     hot: {
       main: '#ff0000',
diff --git a/Eplant/util/PanZoom/index.tsx b/Eplant/util/PanZoom/index.tsx
index e3317366..2f105f62 100644
--- a/Eplant/util/PanZoom/index.tsx
+++ b/Eplant/util/PanZoom/index.tsx
@@ -63,7 +63,7 @@ export default function PanZoom({
   return (
     <Box
       {...props}
-      overflow="hidden"
+      overflow='hidden'
       ref={containerRef}
       onMouseDown={(e) => {
         const { x, y } = e.currentTarget.getBoundingClientRect()
diff --git a/Eplant/util/citations/index.tsx b/Eplant/util/citations/index.tsx
new file mode 100644
index 00000000..aa34299a
--- /dev/null
+++ b/Eplant/util/citations/index.tsx
@@ -0,0 +1,8 @@
+import { useCitations } from '@eplant/state'
+
+export const getCitation = (viewName: string) => {
+  const [citations] = useCitations()
+  return citations.find(
+    (citation: { [key: string]: string }) => citation.view === viewName,
+  )
+}
diff --git a/Eplant/views/CellEFP/icon.tsx b/Eplant/views/CellEFP/icon.tsx
index 613eb77c..a10e1ec7 100644
--- a/Eplant/views/CellEFP/icon.tsx
+++ b/Eplant/views/CellEFP/icon.tsx
@@ -3,13 +3,13 @@ import * as React from 'react'
 export default styled((props) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="28"
-      height="28"
-      viewBox="0 0 100 100"
+      xmlns='http://www.w3.org/2000/svg'
+      width='28'
+      height='28'
+      viewBox='0 0 100 100'
       {...props}
     >
-      <path d="M39.4 20.5C20.9 24.5 7 38 7 52c0 14.1 14 27.6 32.8 31.6C68.5 89.6 98 73.6 98 52c0-14.1-14-27.6-32.8-31.6-8.2-1.7-17.7-1.7-25.8.1zm9.5 17.1c4.4.9 9.1 5.5 9.1 8.9 0 8.8-17.3 12.7-25 5.5-4-3.7-4-7.3 0-11 3.9-3.7 9.1-4.7 15.9-3.4z" />
+      <path d='M39.4 20.5C20.9 24.5 7 38 7 52c0 14.1 14 27.6 32.8 31.6C68.5 89.6 98 73.6 98 52c0-14.1-14-27.6-32.8-31.6-8.2-1.7-17.7-1.7-25.8.1zm9.5 17.1c4.4.9 9.1 5.5 9.1 8.9 0 8.8-17.3 12.7-25 5.5-4-3.7-4-7.3 0-11 3.9-3.7 9.1-4.7 15.9-3.4z' />
     </svg>
   )
 })(({ theme }) => ({
diff --git a/Eplant/views/CellEFP/index.tsx b/Eplant/views/CellEFP/index.tsx
index a446c980..8bbc7ab7 100644
--- a/Eplant/views/CellEFP/index.tsx
+++ b/Eplant/views/CellEFP/index.tsx
@@ -8,7 +8,7 @@ import { makeCellEfps } from '../eFP/Viewer/util'
 
 const views: EFPViewerData['views'] = [
   {
-    name: 'cellEFP',
+    name: 'Cell eFP',
     id: 'cellefp',
     svgURL: 'https://bar.utoronto.ca/eplant/data/cell/Arabidopsis_thaliana.svg',
     xmlURL: 'https://bar.utoronto.ca/eplant/data/cell/Arabidopsis_thaliana.xml',
diff --git a/Eplant/views/DebugView/index.tsx b/Eplant/views/DebugView/index.tsx
index 05b34ee5..2432d6f6 100644
--- a/Eplant/views/DebugView/index.tsx
+++ b/Eplant/views/DebugView/index.tsx
@@ -79,7 +79,7 @@ const DebugView: View<null, DebugViewState, DebugViewAction> = {
   ],
   id: 'debug-view',
   header: ({ geneticElement }) => (
-    <Typography variant="h6">Debug view for {geneticElement?.id}</Typography>
+    <Typography variant='h6'>Debug view for {geneticElement?.id}</Typography>
   ),
   icon: () => <BugReportOutlined />,
 }
diff --git a/Eplant/views/ExperimentEFP/icon.tsx b/Eplant/views/ExperimentEFP/icon.tsx
index 0ecdd655..7c000dad 100644
--- a/Eplant/views/ExperimentEFP/icon.tsx
+++ b/Eplant/views/ExperimentEFP/icon.tsx
@@ -3,14 +3,14 @@ import * as React from 'react'
 export default styled(function ExperimentEFPIcon(props) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
-      <path d="M4.41687 13.744L4.38992 13.7698V13.7697C3.68023 14.451 3.28164 15.375 3.28164 16.3384C3.28164 17.3017 3.68023 18.2257 4.38992 18.907L4.96945 19.4633V19.4631C4.58604 19.6576 4.26505 19.9488 4.04093 20.3052C3.81699 20.6616 3.69828 21.0699 3.69794 21.4862V22.913C3.69794 23.0704 3.7636 23.221 3.88043 23.3313C3.99726 23.4416 4.1552 23.5024 4.31893 23.4998H20.7351C20.8973 23.4998 21.0526 23.438 21.1674 23.328C21.282 23.218 21.3463 23.0687 21.3463 22.913V21.4885C21.3458 20.8813 21.0941 20.299 20.6467 19.8696C20.1994 19.4402 19.5927 19.1986 18.9599 19.1981H18.7449C19.3761 17.8074 19.6768 16.2996 19.6251 14.7835L20.9406 14.6146C20.96 15.1643 20.9232 15.7147 20.8304 16.2575C20.7765 16.5775 21.003 16.8791 21.3366 16.931C21.6703 16.9829 21.9844 16.7653 22.0383 16.4451C22.3306 14.7506 22.1214 13.0112 21.4344 11.4253C21.3777 11.2749 21.2594 11.1532 21.1071 11.0886C20.9546 11.0238 20.7813 11.0216 20.6271 11.0824C20.4731 11.1433 20.3515 11.2619 20.2906 11.4107C20.2297 11.5597 20.2348 11.726 20.3048 11.8712C20.5236 12.3785 20.6875 12.9063 20.7938 13.4459L19.4784 13.6148C19.1392 11.7871 18.2589 10.0916 16.9428 8.73085V8.59711C16.9424 8.15921 16.8191 7.72948 16.5858 7.35327L17.1701 6.79241V6.79225C17.5566 6.41753 17.7734 5.91151 17.7734 5.38422C17.7734 4.85693 17.5566 4.35093 17.1701 3.97602L15.4586 2.33326C15.0686 1.96181 14.5412 1.75342 13.9917 1.75342C13.4419 1.75342 12.9148 1.96181 12.5245 2.33326L5.07181 9.47945C4.95685 9.58962 4.89221 9.73908 4.89221 9.89493C4.89221 10.0508 4.95685 10.2002 5.07181 10.3102L8.86174 13.9456C8.97635 14.056 9.13207 14.1178 9.29444 14.1178C9.45681 14.1178 9.61253 14.056 9.72731 13.9456L13.0966 10.7092C13.4876 10.9364 13.9354 11.058 14.3925 11.0613H14.5196C14.8643 11.5635 17.087 15.1424 13.7739 19.212H6.41903L5.25277 18.0784C4.77283 17.6169 4.50335 16.9913 4.50335 16.3393C4.50335 15.6873 4.77283 15.062 5.25277 14.6003L5.27971 14.5745L6.51933 15.7551C6.75828 15.9844 7.1458 15.9844 7.38489 15.7551C7.62384 15.5256 7.62384 15.1536 7.38489 14.9243L4.0449 11.7185C3.80578 11.489 3.41826 11.489 3.17934 11.7185C2.94022 11.9478 2.94022 12.3198 3.17934 12.5493L4.41687 13.744ZM20.1239 21.4886V22.3263H4.92029V21.4884C4.92029 21.1923 5.04292 20.9081 5.26124 20.6986C5.47938 20.489 5.77545 20.3715 6.08418 20.3715H18.9597C19.2685 20.3715 19.5646 20.489 19.7829 20.6986C20.001 20.9081 20.1236 21.1923 20.1236 21.4884L20.1239 21.4886ZM14.3928 9.888C14.0387 9.888 13.6992 9.75294 13.4488 9.51262C13.1984 9.27231 13.0577 8.94636 13.0577 8.60653C13.0577 8.26668 13.1984 7.94073 13.4488 7.70043C13.6992 7.46013 14.0388 7.32522 14.3928 7.32522C14.7469 7.32522 15.0865 7.46012 15.3368 7.70043C15.587 7.94075 15.7278 8.26669 15.7278 8.60653C15.7271 8.94621 15.5862 9.27182 15.336 9.51195C15.0858 9.75211 14.7467 9.88732 14.3928 9.88798L14.3928 9.888ZM9.2922 12.7042L6.35814 9.888L13.3755 3.15251V3.15235C13.5396 3.00043 13.7588 2.91547 13.9868 2.91547C14.2148 2.91547 14.434 3.00043 14.5981 3.15235L16.3096 4.79511C16.4726 4.9503 16.5644 5.16148 16.5644 5.38182C16.5644 5.60233 16.4726 5.81352 16.3096 5.96853L15.7375 6.51301C15.08 6.12044 14.2726 6.03534 13.5421 6.28169C12.8117 6.52823 12.2372 7.07958 11.9804 7.78075C11.7237 8.48187 11.8124 9.25688 12.2213 9.88794L9.2922 12.7042ZM15.7154 10.6977H15.7152C16.0179 10.5207 16.2792 10.2858 16.483 10.0076C17.5417 11.2585 19.6518 14.5815 17.3975 19.1981H15.2801C17.9329 15.3139 16.3681 11.8244 15.7177 10.6928L15.7154 10.6977Z" />
-      <path d="M18.036 3.25363C18.1497 3.36692 18.3061 3.43174 18.4702 3.43322C18.6341 3.43486 18.7919 3.37314 18.9078 3.26199C19.024 3.15083 19.0888 2.99973 19.0876 2.84223C19.0864 2.68491 19.0194 2.53464 18.9015 2.42512L17.075 0.672013C16.8361 0.442662 16.4486 0.442662 16.2095 0.672013C15.9705 0.901528 15.9705 1.27348 16.2095 1.5028L18.036 3.25363Z" />
+      <path d='M4.41687 13.744L4.38992 13.7698V13.7697C3.68023 14.451 3.28164 15.375 3.28164 16.3384C3.28164 17.3017 3.68023 18.2257 4.38992 18.907L4.96945 19.4633V19.4631C4.58604 19.6576 4.26505 19.9488 4.04093 20.3052C3.81699 20.6616 3.69828 21.0699 3.69794 21.4862V22.913C3.69794 23.0704 3.7636 23.221 3.88043 23.3313C3.99726 23.4416 4.1552 23.5024 4.31893 23.4998H20.7351C20.8973 23.4998 21.0526 23.438 21.1674 23.328C21.282 23.218 21.3463 23.0687 21.3463 22.913V21.4885C21.3458 20.8813 21.0941 20.299 20.6467 19.8696C20.1994 19.4402 19.5927 19.1986 18.9599 19.1981H18.7449C19.3761 17.8074 19.6768 16.2996 19.6251 14.7835L20.9406 14.6146C20.96 15.1643 20.9232 15.7147 20.8304 16.2575C20.7765 16.5775 21.003 16.8791 21.3366 16.931C21.6703 16.9829 21.9844 16.7653 22.0383 16.4451C22.3306 14.7506 22.1214 13.0112 21.4344 11.4253C21.3777 11.2749 21.2594 11.1532 21.1071 11.0886C20.9546 11.0238 20.7813 11.0216 20.6271 11.0824C20.4731 11.1433 20.3515 11.2619 20.2906 11.4107C20.2297 11.5597 20.2348 11.726 20.3048 11.8712C20.5236 12.3785 20.6875 12.9063 20.7938 13.4459L19.4784 13.6148C19.1392 11.7871 18.2589 10.0916 16.9428 8.73085V8.59711C16.9424 8.15921 16.8191 7.72948 16.5858 7.35327L17.1701 6.79241V6.79225C17.5566 6.41753 17.7734 5.91151 17.7734 5.38422C17.7734 4.85693 17.5566 4.35093 17.1701 3.97602L15.4586 2.33326C15.0686 1.96181 14.5412 1.75342 13.9917 1.75342C13.4419 1.75342 12.9148 1.96181 12.5245 2.33326L5.07181 9.47945C4.95685 9.58962 4.89221 9.73908 4.89221 9.89493C4.89221 10.0508 4.95685 10.2002 5.07181 10.3102L8.86174 13.9456C8.97635 14.056 9.13207 14.1178 9.29444 14.1178C9.45681 14.1178 9.61253 14.056 9.72731 13.9456L13.0966 10.7092C13.4876 10.9364 13.9354 11.058 14.3925 11.0613H14.5196C14.8643 11.5635 17.087 15.1424 13.7739 19.212H6.41903L5.25277 18.0784C4.77283 17.6169 4.50335 16.9913 4.50335 16.3393C4.50335 15.6873 4.77283 15.062 5.25277 14.6003L5.27971 14.5745L6.51933 15.7551C6.75828 15.9844 7.1458 15.9844 7.38489 15.7551C7.62384 15.5256 7.62384 15.1536 7.38489 14.9243L4.0449 11.7185C3.80578 11.489 3.41826 11.489 3.17934 11.7185C2.94022 11.9478 2.94022 12.3198 3.17934 12.5493L4.41687 13.744ZM20.1239 21.4886V22.3263H4.92029V21.4884C4.92029 21.1923 5.04292 20.9081 5.26124 20.6986C5.47938 20.489 5.77545 20.3715 6.08418 20.3715H18.9597C19.2685 20.3715 19.5646 20.489 19.7829 20.6986C20.001 20.9081 20.1236 21.1923 20.1236 21.4884L20.1239 21.4886ZM14.3928 9.888C14.0387 9.888 13.6992 9.75294 13.4488 9.51262C13.1984 9.27231 13.0577 8.94636 13.0577 8.60653C13.0577 8.26668 13.1984 7.94073 13.4488 7.70043C13.6992 7.46013 14.0388 7.32522 14.3928 7.32522C14.7469 7.32522 15.0865 7.46012 15.3368 7.70043C15.587 7.94075 15.7278 8.26669 15.7278 8.60653C15.7271 8.94621 15.5862 9.27182 15.336 9.51195C15.0858 9.75211 14.7467 9.88732 14.3928 9.88798L14.3928 9.888ZM9.2922 12.7042L6.35814 9.888L13.3755 3.15251V3.15235C13.5396 3.00043 13.7588 2.91547 13.9868 2.91547C14.2148 2.91547 14.434 3.00043 14.5981 3.15235L16.3096 4.79511C16.4726 4.9503 16.5644 5.16148 16.5644 5.38182C16.5644 5.60233 16.4726 5.81352 16.3096 5.96853L15.7375 6.51301C15.08 6.12044 14.2726 6.03534 13.5421 6.28169C12.8117 6.52823 12.2372 7.07958 11.9804 7.78075C11.7237 8.48187 11.8124 9.25688 12.2213 9.88794L9.2922 12.7042ZM15.7154 10.6977H15.7152C16.0179 10.5207 16.2792 10.2858 16.483 10.0076C17.5417 11.2585 19.6518 14.5815 17.3975 19.1981H15.2801C17.9329 15.3139 16.3681 11.8244 15.7177 10.6928L15.7154 10.6977Z' />
+      <path d='M18.036 3.25363C18.1497 3.36692 18.3061 3.43174 18.4702 3.43322C18.6341 3.43486 18.7919 3.37314 18.9078 3.26199C19.024 3.15083 19.0888 2.99973 19.0876 2.84223C19.0864 2.68491 19.0194 2.53464 18.9015 2.42512L17.075 0.672013C16.8361 0.442662 16.4486 0.442662 16.2095 0.672013C15.9705 0.901528 15.9705 1.27348 16.2095 1.5028L18.036 3.25363Z' />
     </svg>
   )
 })(({ theme }) => ({
diff --git a/Eplant/views/FallbackView/index.tsx b/Eplant/views/FallbackView/index.tsx
index 091b429e..53699d50 100644
--- a/Eplant/views/FallbackView/index.tsx
+++ b/Eplant/views/FallbackView/index.tsx
@@ -10,7 +10,7 @@ const FallbackView: View<null> = {
   },
   id: 'fallback',
   header: ({ geneticElement }) => (
-    <Typography variant="h6">{geneticElement?.id}</Typography>
+    <Typography variant='h6'>{geneticElement?.id}</Typography>
   ),
 }
 
diff --git a/Eplant/views/GeneInfoView/GeneModel.tsx b/Eplant/views/GeneInfoView/GeneModel.tsx
index 25cc44b4..053b884d 100644
--- a/Eplant/views/GeneInfoView/GeneModel.tsx
+++ b/Eplant/views/GeneInfoView/GeneModel.tsx
@@ -42,7 +42,7 @@ export const GeneModel = ({ feature, margin }: GeneModelProps) => {
         height / 2 + 5
       } ${width - margin - 10},${height / 2 - 5}`}
       fill={theme.palette.grey[500]}
-      stroke="none"
+      stroke='none'
     ></polyline>
   )
 
@@ -52,11 +52,11 @@ export const GeneModel = ({ feature, margin }: GeneModelProps) => {
         margin + 10
       },${height / 2 - 5}`}
       fill={theme.palette.grey[500]}
-      stroke="none"
+      stroke='none'
     ></polyline>
   )
   return (
-    <Stack direction={'row'} spacing={3} alignItems="center">
+    <Stack direction={'row'} spacing={3} alignItems='center'>
       <Typography variant={'body1'}>{feature.uniqueID}</Typography>
       <div ref={ref} style={{ padding: 0, margin: 0, width: '100%' }}>
         <svg
@@ -72,7 +72,7 @@ export const GeneModel = ({ feature, margin }: GeneModelProps) => {
             y={height / 2 - 1}
             // Subtract a bit from width because there are arrows at the end
             width={Math.max(width - 2 * margin - 4, 0)}
-            stroke="none"
+            stroke='none'
             height={2}
             fill={theme.palette.grey[500]}
           ></rect>
@@ -110,8 +110,8 @@ export const GeneModel = ({ feature, margin }: GeneModelProps) => {
                 <Tooltip
                   key={sf.uniqueID}
                   title={
-                    <Stack direction="column" spacing={1}>
-                      <Typography variant="subtitle1">{sf.type}</Typography>
+                    <Stack direction='column' spacing={1}>
+                      <Typography variant='subtitle1'>{sf.type}</Typography>
                       <div>Start: {sf.start}</div>
                       <div>End: {sf.end}</div>
                       <div>Strand: {sf.strand}</div>
@@ -125,7 +125,7 @@ export const GeneModel = ({ feature, margin }: GeneModelProps) => {
                     y={height / 2 - h / 2}
                     height={h}
                     fill={color}
-                    stroke="none"
+                    stroke='none'
                   ></rect>
                 </Tooltip>
               )
diff --git a/Eplant/views/GeneInfoView/component.tsx b/Eplant/views/GeneInfoView/component.tsx
index 18b0feea..77a34d9c 100644
--- a/Eplant/views/GeneInfoView/component.tsx
+++ b/Eplant/views/GeneInfoView/component.tsx
@@ -14,10 +14,17 @@ import {
 import { View, ViewProps } from '../../View'
 import { useViewData } from '../../View/viewData'
 import { GeneModel } from './GeneModel'
-import { Alert, Box, Button, ButtonProps, LinearProgress, Snackbar } from '@mui/material'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import {
+  Alert,
+  Box,
+  Button,
+  ButtonProps,
+  LinearProgress,
+  Snackbar,
+} from '@mui/material'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import { IconButton } from '@mui/material'
-import { setStroke } from '../eFP/Tooltips/EFPTooltip';
+import { setStroke } from '../eFP/Tooltips/EFPTooltip'
 
 const SecondaryText = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,
@@ -128,7 +135,7 @@ const GeneSequence = ({
   }
   return (
     <>
-      <CodeBody variant="caption">{spans}</CodeBody>
+      <CodeBody variant='caption'>{spans}</CodeBody>
     </>
   )
 }
@@ -162,7 +169,7 @@ const ViewButton = styled(function ViewButton({
           },
         })}
         value={loadingAmount * 100}
-        variant="determinate"
+        variant='determinate'
       />
       <Box
         sx={{
@@ -192,35 +199,47 @@ export default function GeneInfoViewer({
     navigator.clipboard.writeText(text)
   }
 
-
   return (
-    <Stack direction="row" gap={'20px'} >
+    <Stack direction='row' gap={'20px'}>
       <ViewSwitcher geneticElement={geneticElement} />
-      <Stack direction="column" gap={'16px'} flex={4} sx={{ background: (theme) => theme.palette.background.paperOverlay, padding: 2, borderRadius: (theme) => theme.shape.borderRadius+'px', border: '1px solid', borderColor:  (theme) => theme.palette.background.edgeLight }}>
+      <Stack
+        direction='column'
+        gap={'16px'}
+        flex={4}
+        sx={{
+          background: (theme) => theme.palette.background.paperOverlay,
+          padding: 2,
+          borderRadius: (theme) => theme.shape.borderRadius + 'px',
+          border: '1px solid',
+          borderColor: (theme) => theme.palette.background.edgeLight,
+        }}
+      >
         <div>
-          <Typography variant="h5" sx={{fontWeight: 500}}>{geneticElement.id}</Typography>
+          <Typography variant='h5' sx={{ fontWeight: 500 }}>
+            {geneticElement.id}
+          </Typography>
           <SecondaryText>{geneticElement.aliases.join(', ')}</SecondaryText>
         </div>
         <div>
-          <Typography variant="body1">Full name</Typography>
+          <Typography variant='body1'>Full name</Typography>
           <SecondaryText>{activeData.name}</SecondaryText>
         </div>
         <div>
-          <Typography variant="body1">Brief description</Typography>
+          <Typography variant='body1'>Brief description</Typography>
           <SecondaryText>{activeData.brief_description}</SecondaryText>
         </div>
         <div>
-          <Typography variant="body1">Computational description</Typography>
+          <Typography variant='body1'>Computational description</Typography>
           <SecondaryText>
             {activeData.computational_description}
           </SecondaryText>{' '}
         </div>
         <div>
-          <Typography variant="body1">Curator summary</Typography>
+          <Typography variant='body1'>Curator summary</Typography>
           <SecondaryText>{activeData.curator_summary}</SecondaryText>
         </div>
         <div>
-          <Typography variant="body1">Location & Gene model</Typography>
+          <Typography variant='body1'>Location & Gene model</Typography>
           <div>
             <SecondaryText>
               {activeData.location}: {activeData.chromosome_start} to{' '}
@@ -234,10 +253,10 @@ export default function GeneInfoViewer({
           </div>
         </div>
         <div>
-          <Typography variant="body1">DNA sequence</Typography>
+          <Typography variant='body1'>DNA sequence</Typography>
           <div>
             <div>
-              <SecondaryText variant="caption" whiteSpace={'nowrap'}>
+              <SecondaryText variant='caption' whiteSpace={'nowrap'}>
                 {'> ' + geneticElement.id}
               </SecondaryText>
             </div>
@@ -246,16 +265,18 @@ export default function GeneInfoViewer({
                 geneticElement={geneticElement}
                 activeData={activeData}
               ></GeneSequence>
-              <IconButton onClick={() => copyToClipboard(activeData.geneSequence)} color='primary' sx={{ ml: 1 }}>
+              <IconButton
+                onClick={() => copyToClipboard(activeData.geneSequence)}
+                color='primary'
+                sx={{ ml: 1 }}
+              >
                 <ContentCopyIcon />
               </IconButton>
               <Snackbar
-                anchorOrigin={
-                  {
-                    vertical: 'top',
-                    horizontal: 'center'
-                  }
-                }
+                anchorOrigin={{
+                  vertical: 'top',
+                  horizontal: 'center',
+                }}
                 open={snackBarOpen}
                 onClose={() => setSnackBarOpen(false)}
                 autoHideDuration={2000}
@@ -267,24 +288,28 @@ export default function GeneInfoViewer({
         </div>
         {activeData.geneticElementType == 'protein_coding' ? (
           <div>
-            <Typography variant="body1">Protein sequence</Typography>
+            <Typography variant='body1'>Protein sequence</Typography>
             <div>
-              <SecondaryText variant="caption" whiteSpace={'nowrap'}>
+              <SecondaryText variant='caption' whiteSpace={'nowrap'}>
                 {'> ' + geneticElement.id}
               </SecondaryText>
             </div>
             <div>
-              <CodeBody variant="caption" style={{ wordBreak: 'break-word' }}>
+              <CodeBody variant='caption' style={{ wordBreak: 'break-word' }}>
                 {activeData.proteinSequence}
               </CodeBody>
-              <IconButton onClick={() => copyToClipboard(activeData.proteinSequence)} color='primary' sx={{ ml: 1 }}>
+              <IconButton
+                onClick={() => copyToClipboard(activeData.proteinSequence)}
+                color='primary'
+                sx={{ ml: 1 }}
+              >
                 <ContentCopyIcon />
               </IconButton>
             </div>
           </div>
         ) : undefined}
       </Stack>
-    </Stack >
+    </Stack>
   )
 }
 function ViewSwitcher({ geneticElement }: { geneticElement: GeneticElement }) {
@@ -305,12 +330,12 @@ function ViewSwitcher({ geneticElement }: { geneticElement: GeneticElement }) {
           whiteSpace: 'nowrap',
         }}
       >
-        <Typography variant="body2" color="secondary">
+        <Typography variant='body2' color='secondary'>
           Available views
         </Typography>
         {userViews.map((view) => (
           <ViewButton
-            color="secondary"
+            color='secondary'
             sx={{
               textAlign: 'left',
               justifyContent: 'flex-start',
diff --git a/Eplant/views/GeneInfoView/icon.tsx b/Eplant/views/GeneInfoView/icon.tsx
index 7c2113b6..7e8a9a03 100644
--- a/Eplant/views/GeneInfoView/icon.tsx
+++ b/Eplant/views/GeneInfoView/icon.tsx
@@ -3,15 +3,15 @@ import React from 'react'
 
 export default styled((props) => (
   <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <path d="M12 8.46143C11.6951 8.46143 11.4026 8.58272 11.1868 8.79834C10.9712 9.01397 10.8501 9.30658 10.8501 9.61157V17.1751C10.8501 17.5859 11.0692 17.9656 11.425 18.171C11.781 18.3764 12.2193 18.3764 12.5751 18.171C12.9309 17.9656 13.15 17.5859 13.15 17.1751V9.61157C13.15 9.30661 13.0289 9.01397 12.8133 8.79834C12.5976 8.58272 12.305 8.46143 12 8.46143Z" />
-    <path d="M13.1557 6.25229C13.1557 5.83875 12.9351 5.45656 12.577 5.24981C12.2189 5.04303 11.7776 5.04303 11.4195 5.24981C11.0614 5.45658 10.8408 5.83873 10.8408 6.25229C10.8408 6.66585 11.0615 7.04802 11.4195 7.25478C11.7776 7.46155 12.2189 7.46155 12.577 7.25478C12.9351 7.04801 13.1557 6.66585 13.1557 6.25229Z" />
-    <path d="M12 0.5C8.95001 0.5 6.02501 1.71156 3.86823 3.86823C1.71156 6.02491 0.5 8.95016 0.5 12C0.5 15.0498 1.71156 17.975 3.86823 20.1318C6.02491 22.2884 8.95016 23.5 12 23.5C15.05 23.5 17.975 22.2884 20.1318 20.1318C22.2884 17.9751 23.5 15.0498 23.5 12C23.4967 8.95099 22.284 6.02796 20.1281 3.87218C17.972 1.71609 15.0492 0.503351 11.9998 0.500099L12 0.5ZM12 21.2003C9.55993 21.2003 7.22001 20.2309 5.49469 18.5055C3.76927 16.7803 2.7999 14.4402 2.7999 12.0002C2.7999 9.56022 3.76927 7.22001 5.49469 5.49488C7.2201 3.76946 9.56003 2.8001 12 2.8001C14.4401 2.8001 16.7802 3.76946 18.5053 5.49488C20.2307 7.2201 21.2001 9.56022 21.2001 12.0002C21.1972 14.4393 20.2271 16.7779 18.5023 18.5026C16.7776 20.2274 14.4392 21.1975 11.9999 21.2004L12 21.2003Z" />
+    <path d='M12 8.46143C11.6951 8.46143 11.4026 8.58272 11.1868 8.79834C10.9712 9.01397 10.8501 9.30658 10.8501 9.61157V17.1751C10.8501 17.5859 11.0692 17.9656 11.425 18.171C11.781 18.3764 12.2193 18.3764 12.5751 18.171C12.9309 17.9656 13.15 17.5859 13.15 17.1751V9.61157C13.15 9.30661 13.0289 9.01397 12.8133 8.79834C12.5976 8.58272 12.305 8.46143 12 8.46143Z' />
+    <path d='M13.1557 6.25229C13.1557 5.83875 12.9351 5.45656 12.577 5.24981C12.2189 5.04303 11.7776 5.04303 11.4195 5.24981C11.0614 5.45658 10.8408 5.83873 10.8408 6.25229C10.8408 6.66585 11.0615 7.04802 11.4195 7.25478C11.7776 7.46155 12.2189 7.46155 12.577 7.25478C12.9351 7.04801 13.1557 6.66585 13.1557 6.25229Z' />
+    <path d='M12 0.5C8.95001 0.5 6.02501 1.71156 3.86823 3.86823C1.71156 6.02491 0.5 8.95016 0.5 12C0.5 15.0498 1.71156 17.975 3.86823 20.1318C6.02491 22.2884 8.95016 23.5 12 23.5C15.05 23.5 17.975 22.2884 20.1318 20.1318C22.2884 17.9751 23.5 15.0498 23.5 12C23.4967 8.95099 22.284 6.02796 20.1281 3.87218C17.972 1.71609 15.0492 0.503351 11.9998 0.500099L12 0.5ZM12 21.2003C9.55993 21.2003 7.22001 20.2309 5.49469 18.5055C3.76927 16.7803 2.7999 14.4402 2.7999 12.0002C2.7999 9.56022 3.76927 7.22001 5.49469 5.49488C7.2201 3.76946 9.56003 2.8001 12 2.8001C14.4401 2.8001 16.7802 3.76946 18.5053 5.49488C20.2307 7.2201 21.2001 9.56022 21.2001 12.0002C21.1972 14.4393 20.2271 16.7779 18.5023 18.5026C16.7776 20.2274 14.4392 21.1975 11.9999 21.2004L12 21.2003Z' />
   </svg>
 ))(({ theme }) => ({
   fill: theme.palette.text.primary,
diff --git a/Eplant/views/GeneInfoView/index.tsx b/Eplant/views/GeneInfoView/index.tsx
index a6dcb561..f0baa264 100644
--- a/Eplant/views/GeneInfoView/index.tsx
+++ b/Eplant/views/GeneInfoView/index.tsx
@@ -27,19 +27,19 @@ const GeneInfoView: View<GeneInfoViewData> = {
     return (
       <div>
         Data for this view comes from TAIR{' '}
-        <Link href="http://www.arabidopsis.org/download_files/Genes/Araport11_genome_release/Araport11_GFF3_genes_transposons.201606.gff.gz">
+        <Link href='http://www.arabidopsis.org/download_files/Genes/Araport11_genome_release/Araport11_GFF3_genes_transposons.201606.gff.gz'>
           GFF3
         </Link>
         , TAIR{' '}
-        <Link href="http://www.arabidopsis.org/download_files/Genes/Araport11_genome_release/Araport11_blastsets/Araport11_genes.201606.pep.fasta.gz">
+        <Link href='http://www.arabidopsis.org/download_files/Genes/Araport11_genome_release/Araport11_blastsets/Araport11_genes.201606.pep.fasta.gz'>
           Protein Sequences
         </Link>
         , TAIR{' '}
-        <Link href="https://www.arabidopsis.org/download_files/Public_Data_Releases/TAIR_Data_20190331/gene_aliases_20190402.txt.gz">
+        <Link href='https://www.arabidopsis.org/download_files/Public_Data_Releases/TAIR_Data_20190331/gene_aliases_20190402.txt.gz'>
           Gene Aliases
         </Link>
         , TAIR{' '}
-        <Link href="https://www.arabidopsis.org/download_files/Public_Data_Releases/TAIR_Data_20190331/Araport11_functional_descriptions_20190402.txt.gz">
+        <Link href='https://www.arabidopsis.org/download_files/Public_Data_Releases/TAIR_Data_20190331/Araport11_functional_descriptions_20190402.txt.gz'>
           Functional description
         </Link>{' '}
         and TAIR10 Genome Sequence.
@@ -47,7 +47,7 @@ const GeneInfoView: View<GeneInfoViewData> = {
     )
   },
   header: ({ geneticElement }) => (
-    <Typography variant="h6">Information on {geneticElement?.id}</Typography>
+    <Typography variant='h6'>Information on {geneticElement?.id}</Typography>
   ),
 }
 
diff --git a/Eplant/views/GetStartedView/Tile.tsx b/Eplant/views/GetStartedView/Tile.tsx
index d1260767..7246eb17 100644
--- a/Eplant/views/GetStartedView/Tile.tsx
+++ b/Eplant/views/GetStartedView/Tile.tsx
@@ -44,18 +44,24 @@ export default function Tile({ view }: TileProps) {
       })}
     >
       <CardMedia
-        component="img"
+        component='img'
         image={view.thumbnail}
         alt={view.name}
         height={'100%'}
-        sx={{ width: 'auto', margin: '1rem 1rem 0 1rem', border: '2px solid', borderColor: (theme) => theme.palette.background.edgeLight, borderRadius: (theme) => theme.shape.borderRadius+"px" }}
+        sx={{
+          width: 'auto',
+          margin: '1rem 1rem 0 1rem',
+          border: '2px solid',
+          borderColor: (theme) => theme.palette.background.edgeLight,
+          borderRadius: (theme) => theme.shape.borderRadius + 'px',
+        }}
       />
 
       <CardContent>
         <div>
-          <Typography variant="h6">{view.name}</Typography>
+          <Typography variant='h6'>{view.name}</Typography>
           <Typography
-            variant="body2"
+            variant='body2'
             color={(theme) => theme.palette.secondary.main}
           >
             {view.description}
@@ -65,13 +71,13 @@ export default function Tile({ view }: TileProps) {
 
       <CardActions>
         <Typography
-          variant="caption"
+          variant='caption'
           color={(theme) => theme.palette.secondary.main}
           sx={{ ml: 1 }}
         >
           Example{' '}
         </Typography>
-        <Button onClick={setView} size="small">
+        <Button onClick={setView} size='small'>
           AT3G24650 | ABI3
         </Button>
       </CardActions>
diff --git a/Eplant/views/GetStartedView/component.tsx b/Eplant/views/GetStartedView/component.tsx
index 85ab7133..30998800 100644
--- a/Eplant/views/GetStartedView/component.tsx
+++ b/Eplant/views/GetStartedView/component.tsx
@@ -13,23 +13,23 @@ export default function GetStartedView({
   return (
     <Stack spacing={3}>
       <div>
-        <Typography variant="h2">ePlant 3</Typography>
-        <Typography variant="h4" color={theme.palette.secondary.main}>
+        <Typography variant='h2'>ePlant 3</Typography>
+        <Typography variant='h4' color={theme.palette.secondary.main}>
           Bioinformatics evolved
         </Typography>
       </div>
       <Stack spacing={1}>
-        <Typography variant="h5">Start</Typography>
-        <Stack direction="row" spacing={2}>
-          <Filter1 color="primary" />
+        <Typography variant='h5'>Start</Typography>
+        <Stack direction='row' spacing={2}>
+          <Filter1 color='primary' />
           <Typography>Select a species</Typography>
         </Stack>
-        <Stack direction="row" spacing={2}>
-          <Filter2 color="primary" />
+        <Stack direction='row' spacing={2}>
+          <Filter2 color='primary' />
           <Typography>Enter a gene of interest</Typography>
         </Stack>
-        <Stack direction="row" spacing={2}>
-          <Filter3 color="primary" />
+        <Stack direction='row' spacing={2}>
+          <Filter3 color='primary' />
           <Typography>
             Use the view selector to navigate between views
           </Typography>
@@ -38,25 +38,25 @@ export default function GetStartedView({
       <Stack>
         <Typography
           sx={{ width: '100%', maxWidth: 860 }}
-          variant="body2"
+          variant='body2'
           color={theme.palette.secondary.main}
         >
           Built by students in the{' '}
-          <Link href="https://bar.utoronto.ca/" target="_blank">
+          <Link href='https://bar.utoronto.ca/' target='_blank'>
             Provart Lab
           </Link>{' '}
           at the University of Toronto. If you&apos;re interested in
           contributing to the project, visit our{' '}
           <Link
-            href="https://github.com/BioAnalyticResource/ePlant"
-            target="_blank"
+            href='https://github.com/BioAnalyticResource/ePlant'
+            target='_blank'
           >
             GitHub
           </Link>{' '}
           page and reach out to us{' '}
           <Link
-            href="https://github.com/BioAnalyticResource/ePlant/issues"
-            target="_blank"
+            href='https://github.com/BioAnalyticResource/ePlant/issues'
+            target='_blank'
           >
             here
           </Link>
diff --git a/Eplant/views/PlantEFP/icon.tsx b/Eplant/views/PlantEFP/icon.tsx
index 5a4c51aa..555674a6 100644
--- a/Eplant/views/PlantEFP/icon.tsx
+++ b/Eplant/views/PlantEFP/icon.tsx
@@ -3,13 +3,13 @@ import * as React from 'react'
 export default styled((props) => {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
-      <path d="M20.2573 0.500008C18.0687 0.496985 15.941 1.37872 14.4035 2.99125C14.4034 2.99125 14.4034 2.99144 14.4034 2.99144C12.5067 4.98218 11.7899 7.80009 12.4965 10.4301C11.7218 11.733 11.1167 13.1451 10.767 14.7081C10.6077 14.3831 10.4356 14.0661 10.2527 13.756C10.8507 11.4709 10.2219 9.02883 8.57598 7.30109V7.30128C8.57598 7.30109 8.57579 7.30109 8.57579 7.30109C7.23324 5.89301 5.37531 5.12312 3.46446 5.12593C2.92944 5.12668 2.3904 5.18789 1.85726 5.31278L1.87294 5.31108V5.31089C1.74125 5.33866 1.61939 5.40101 1.51983 5.49151C1.42026 5.58201 1.34658 5.69744 1.30634 5.82592C0.571027 8.19455 1.18164 10.7752 2.89956 12.5778C2.89956 12.5778 2.89975 12.5778 2.89975 12.578C4.48277 14.2383 6.78243 15.0109 9.03982 14.6765C9.81668 16.0351 10.3368 17.5229 10.4706 19.2325V22.7645L10.4708 22.7643C10.4708 22.9654 10.5505 23.1581 10.6928 23.3003C10.8348 23.4424 11.0276 23.5223 11.2286 23.5223C11.4298 23.5223 11.6225 23.4424 11.7646 23.3003C11.9068 23.1581 11.9867 22.9654 11.9867 22.7643V16.7747C12.1458 14.7333 12.7744 12.9617 13.71 11.347C16.3223 11.7616 18.9925 10.8781 20.8251 8.9567L20.8249 8.95689V8.9567C22.7923 6.89263 23.4911 3.93872 22.6492 1.22732V1.22751C22.609 1.09904 22.5353 0.983598 22.4357 0.893101C22.3362 0.802603 22.2143 0.740254 22.0826 0.712294L22.0983 0.714183C21.4877 0.571164 20.8701 0.501073 20.2574 0.500125L20.2573 0.500008ZM20.2548 2.01599C20.6083 2.01637 20.9637 2.04547 21.3179 2.10366C21.8042 4.16942 21.2185 6.34681 19.7279 7.91097C18.4043 9.29903 16.5353 10.0211 14.6388 9.92213C15.7714 8.35589 17.1743 6.91869 18.6728 5.48981L18.6726 5.49C18.8181 5.35133 18.9026 5.16032 18.9073 4.95947C18.9122 4.75846 18.8368 4.56385 18.6982 4.41836C18.5436 4.25606 18.3252 4.17067 18.1015 4.18484C17.9237 4.19618 17.7556 4.26986 17.6265 4.39266C16.2473 5.70764 14.8984 7.07848 13.7478 8.58731C13.6991 6.92584 14.3112 5.28632 15.5009 4.03751C16.7465 2.73105 18.475 2.01388 20.2549 2.01615L20.2548 2.01599ZM3.46746 6.64177C4.96966 6.63969 6.428 7.24504 7.47885 8.34706C8.40931 9.32381 8.92074 10.5829 8.9574 11.8774C8.00575 10.669 6.91316 9.56318 5.80074 8.50256V8.50275C5.6717 8.37975 5.50355 8.30607 5.32577 8.29473C5.10208 8.28056 4.88367 8.36615 4.72912 8.52825C4.59045 8.67373 4.51507 8.86832 4.51998 9.06937C4.5247 9.27039 4.60916 9.46121 4.75463 9.5999C5.99005 10.7779 7.14609 11.9587 8.09286 13.2349C6.5612 13.2602 5.06771 12.6545 3.99741 11.5319C2.75673 10.2302 2.2604 8.42625 2.64128 6.70548C2.91674 6.66373 3.19294 6.64238 3.46766 6.642L3.46746 6.64177Z" />
+      <path d='M20.2573 0.500008C18.0687 0.496985 15.941 1.37872 14.4035 2.99125C14.4034 2.99125 14.4034 2.99144 14.4034 2.99144C12.5067 4.98218 11.7899 7.80009 12.4965 10.4301C11.7218 11.733 11.1167 13.1451 10.767 14.7081C10.6077 14.3831 10.4356 14.0661 10.2527 13.756C10.8507 11.4709 10.2219 9.02883 8.57598 7.30109V7.30128C8.57598 7.30109 8.57579 7.30109 8.57579 7.30109C7.23324 5.89301 5.37531 5.12312 3.46446 5.12593C2.92944 5.12668 2.3904 5.18789 1.85726 5.31278L1.87294 5.31108V5.31089C1.74125 5.33866 1.61939 5.40101 1.51983 5.49151C1.42026 5.58201 1.34658 5.69744 1.30634 5.82592C0.571027 8.19455 1.18164 10.7752 2.89956 12.5778C2.89956 12.5778 2.89975 12.5778 2.89975 12.578C4.48277 14.2383 6.78243 15.0109 9.03982 14.6765C9.81668 16.0351 10.3368 17.5229 10.4706 19.2325V22.7645L10.4708 22.7643C10.4708 22.9654 10.5505 23.1581 10.6928 23.3003C10.8348 23.4424 11.0276 23.5223 11.2286 23.5223C11.4298 23.5223 11.6225 23.4424 11.7646 23.3003C11.9068 23.1581 11.9867 22.9654 11.9867 22.7643V16.7747C12.1458 14.7333 12.7744 12.9617 13.71 11.347C16.3223 11.7616 18.9925 10.8781 20.8251 8.9567L20.8249 8.95689V8.9567C22.7923 6.89263 23.4911 3.93872 22.6492 1.22732V1.22751C22.609 1.09904 22.5353 0.983598 22.4357 0.893101C22.3362 0.802603 22.2143 0.740254 22.0826 0.712294L22.0983 0.714183C21.4877 0.571164 20.8701 0.501073 20.2574 0.500125L20.2573 0.500008ZM20.2548 2.01599C20.6083 2.01637 20.9637 2.04547 21.3179 2.10366C21.8042 4.16942 21.2185 6.34681 19.7279 7.91097C18.4043 9.29903 16.5353 10.0211 14.6388 9.92213C15.7714 8.35589 17.1743 6.91869 18.6728 5.48981L18.6726 5.49C18.8181 5.35133 18.9026 5.16032 18.9073 4.95947C18.9122 4.75846 18.8368 4.56385 18.6982 4.41836C18.5436 4.25606 18.3252 4.17067 18.1015 4.18484C17.9237 4.19618 17.7556 4.26986 17.6265 4.39266C16.2473 5.70764 14.8984 7.07848 13.7478 8.58731C13.6991 6.92584 14.3112 5.28632 15.5009 4.03751C16.7465 2.73105 18.475 2.01388 20.2549 2.01615L20.2548 2.01599ZM3.46746 6.64177C4.96966 6.63969 6.428 7.24504 7.47885 8.34706C8.40931 9.32381 8.92074 10.5829 8.9574 11.8774C8.00575 10.669 6.91316 9.56318 5.80074 8.50256V8.50275C5.6717 8.37975 5.50355 8.30607 5.32577 8.29473C5.10208 8.28056 4.88367 8.36615 4.72912 8.52825C4.59045 8.67373 4.51507 8.86832 4.51998 9.06937C4.5247 9.27039 4.60916 9.46121 4.75463 9.5999C5.99005 10.7779 7.14609 11.9587 8.09286 13.2349C6.5612 13.2602 5.06771 12.6545 3.99741 11.5319C2.75673 10.2302 2.2604 8.42625 2.64128 6.70548C2.91674 6.66373 3.19294 6.64238 3.46766 6.642L3.46746 6.64177Z' />
     </svg>
   )
 })(({ theme }) => ({
diff --git a/Eplant/views/PlantEFP/index.tsx b/Eplant/views/PlantEFP/index.tsx
index afe5ab25..f9f0af75 100644
--- a/Eplant/views/PlantEFP/index.tsx
+++ b/Eplant/views/PlantEFP/index.tsx
@@ -9,7 +9,7 @@ import { EFPViewerData } from '../eFP/Viewer/types'
 
 const views: EFPViewerData['views'] = [
   {
-    name: 'AtGenExpress',
+    name: 'AtGenExpress eFP',
     id: 'atgenexpress',
     svgURL:
       'https://bar.utoronto.ca/eplant/data/plant/AtGenExpress/Arabidopsis_thaliana.svg',
@@ -17,7 +17,7 @@ const views: EFPViewerData['views'] = [
       'https://bar.utoronto.ca/eplant/data/plant/AtGenExpress/Arabidopsis_thaliana.xml',
   },
   {
-    name: 'Klepikova',
+    name: 'Klepikova eFP (RNA-Seq data)',
     id: 'klepikova',
     svgURL:
       'https://bar.utoronto.ca/eplant/data/plant/Klepikova/Arabidopsis_thaliana.svg',
diff --git a/Eplant/views/PublicationViewer/GeneRIFs.tsx b/Eplant/views/PublicationViewer/GeneRIFs.tsx
index 2ab4693d..19a9c57c 100644
--- a/Eplant/views/PublicationViewer/GeneRIFs.tsx
+++ b/Eplant/views/PublicationViewer/GeneRIFs.tsx
@@ -19,9 +19,9 @@ const columns: GridColDef[] = [
     renderCell: (params: GridRenderCellParams<{ [key: string]: unknown }>) => (
       <Button
         href={params.value}
-        variant="outlined"
-        color="secondary"
-        size="small"
+        variant='outlined'
+        color='secondary'
+        size='small'
         target='_blank'
       >
         VIEW PAPER
diff --git a/Eplant/views/PublicationViewer/Publications.tsx b/Eplant/views/PublicationViewer/Publications.tsx
index 6f31a5cb..ebe1842f 100644
--- a/Eplant/views/PublicationViewer/Publications.tsx
+++ b/Eplant/views/PublicationViewer/Publications.tsx
@@ -38,9 +38,9 @@ const columns: GridColDef[] = [
       <>
         <Button
           href={params.value}
-          variant="outlined"
-          color="secondary"
-          size="small"
+          variant='outlined'
+          color='secondary'
+          size='small'
           target='_blank'
         >
           VIEW PAPER
diff --git a/Eplant/views/PublicationViewer/SearchBar.tsx b/Eplant/views/PublicationViewer/SearchBar.tsx
index a4fe6196..3894ab57 100644
--- a/Eplant/views/PublicationViewer/SearchBar.tsx
+++ b/Eplant/views/PublicationViewer/SearchBar.tsx
@@ -4,10 +4,10 @@ import * as React from 'react'
 export const SearchBar = () => {
   return (
     <GridToolbarQuickFilter
-      variant="outlined"
-      size="small"
-      placeholder=""
-      label="Search"
+      variant='outlined'
+      size='small'
+      placeholder=''
+      label='Search'
       sx={{ width: '100%', mt: 3 }}
     />
   )
diff --git a/Eplant/views/PublicationViewer/icon.tsx b/Eplant/views/PublicationViewer/icon.tsx
index 2efffd71..d6819990 100644
--- a/Eplant/views/PublicationViewer/icon.tsx
+++ b/Eplant/views/PublicationViewer/icon.tsx
@@ -3,17 +3,17 @@ import * as React from 'react'
 export default styled(function PublicationViewerIcon(props) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
-      <path d="M23.2817 4.93515L19.0648 0.718083C18.9194 0.572694 18.7255 0.5 18.5316 0.5H5.68663C5.27464 0.5 4.911 0.839292 4.911 1.27563V14.7992H1.27563C0.863645 14.7992 0.5 15.1385 0.5 15.5748V20.5674C0.5 22.2153 1.83301 23.5484 3.48096 23.5484H20.5187C22.1667 23.5484 23.4997 22.2153 23.4997 20.5674L23.5 5.49274C23.5 5.27466 23.4273 5.08076 23.2817 4.93536L23.2817 4.93515ZM4.93523 20.543C4.93523 21.3428 4.28082 21.9729 3.50537 21.9729C2.72973 21.9729 2.0755 21.3184 2.0755 20.543L2.07533 16.3259H4.95943V20.543H4.93523ZM18.5557 2.39039L21.6094 5.44406H18.5557V2.39039ZM21.973 20.543C21.973 21.3428 21.3186 21.9729 20.5432 21.9729H6.09864C6.34106 21.5367 6.4621 21.0519 6.4621 20.543L6.46227 2.02686H17.0291V6.19541C17.0291 6.6074 17.3684 6.97104 17.8047 6.97104H21.9733L21.973 20.543Z" />
-      <path d="M18.9436 14.7749H9.4917C9.07971 14.7749 8.71606 15.1142 8.71606 15.5505C8.71606 15.9867 9.05536 16.3262 9.4917 16.3262H18.9679C19.3799 16.3262 19.7435 15.9869 19.7435 15.5505C19.7433 15.1142 19.3797 14.7749 18.9436 14.7749H18.9436Z" />
-      <path d="M18.9436 11.3818H9.4917C9.07971 11.3818 8.71606 11.7211 8.71606 12.1575C8.71606 12.5695 9.05536 12.9331 9.4917 12.9331H18.9679C19.3799 12.9331 19.7435 12.5938 19.7435 12.1575C19.719 11.7211 19.3797 11.3818 18.9436 11.3818H18.9436Z" />
-      <path d="M18.9436 18.1924H9.4917C9.07971 18.1924 8.71606 18.5317 8.71606 18.968C8.71606 19.38 9.05536 19.7436 9.4917 19.7436H18.9679C19.3799 19.7436 19.7435 19.4044 19.7435 18.968C19.719 18.5317 19.3797 18.1924 18.9436 18.1924H18.9436Z" />
-      <path d="M9.49162 9.51551H14.2176C14.6296 9.51551 14.9932 9.17622 14.9932 8.73988L14.9931 5.08032C14.9931 4.66833 14.6538 4.30469 14.2174 4.30469L9.49145 4.30486C9.07947 4.30486 8.71582 4.64415 8.71582 5.08049V8.74005C8.71582 9.15203 9.05511 9.5155 9.49145 9.5155L9.49162 9.51551ZM10.2429 5.83163H13.4421V7.96442H10.2429V5.83163Z" />
+      <path d='M23.2817 4.93515L19.0648 0.718083C18.9194 0.572694 18.7255 0.5 18.5316 0.5H5.68663C5.27464 0.5 4.911 0.839292 4.911 1.27563V14.7992H1.27563C0.863645 14.7992 0.5 15.1385 0.5 15.5748V20.5674C0.5 22.2153 1.83301 23.5484 3.48096 23.5484H20.5187C22.1667 23.5484 23.4997 22.2153 23.4997 20.5674L23.5 5.49274C23.5 5.27466 23.4273 5.08076 23.2817 4.93536L23.2817 4.93515ZM4.93523 20.543C4.93523 21.3428 4.28082 21.9729 3.50537 21.9729C2.72973 21.9729 2.0755 21.3184 2.0755 20.543L2.07533 16.3259H4.95943V20.543H4.93523ZM18.5557 2.39039L21.6094 5.44406H18.5557V2.39039ZM21.973 20.543C21.973 21.3428 21.3186 21.9729 20.5432 21.9729H6.09864C6.34106 21.5367 6.4621 21.0519 6.4621 20.543L6.46227 2.02686H17.0291V6.19541C17.0291 6.6074 17.3684 6.97104 17.8047 6.97104H21.9733L21.973 20.543Z' />
+      <path d='M18.9436 14.7749H9.4917C9.07971 14.7749 8.71606 15.1142 8.71606 15.5505C8.71606 15.9867 9.05536 16.3262 9.4917 16.3262H18.9679C19.3799 16.3262 19.7435 15.9869 19.7435 15.5505C19.7433 15.1142 19.3797 14.7749 18.9436 14.7749H18.9436Z' />
+      <path d='M18.9436 11.3818H9.4917C9.07971 11.3818 8.71606 11.7211 8.71606 12.1575C8.71606 12.5695 9.05536 12.9331 9.4917 12.9331H18.9679C19.3799 12.9331 19.7435 12.5938 19.7435 12.1575C19.719 11.7211 19.3797 11.3818 18.9436 11.3818H18.9436Z' />
+      <path d='M18.9436 18.1924H9.4917C9.07971 18.1924 8.71606 18.5317 8.71606 18.968C8.71606 19.38 9.05536 19.7436 9.4917 19.7436H18.9679C19.3799 19.7436 19.7435 19.4044 19.7435 18.968C19.719 18.5317 19.3797 18.1924 18.9436 18.1924H18.9436Z' />
+      <path d='M9.49162 9.51551H14.2176C14.6296 9.51551 14.9932 9.17622 14.9932 8.73988L14.9931 5.08032C14.9931 4.66833 14.6538 4.30469 14.2174 4.30469L9.49145 4.30486C9.07947 4.30486 8.71582 4.64415 8.71582 5.08049V8.74005C8.71582 9.15203 9.05511 9.5155 9.49145 9.5155L9.49162 9.51551ZM10.2429 5.83163H13.4421V7.96442H10.2429V5.83163Z' />
     </svg>
   )
 })(({ theme }) => ({
diff --git a/Eplant/views/PublicationViewer/index.tsx b/Eplant/views/PublicationViewer/index.tsx
index 28b0dc37..3025bc50 100644
--- a/Eplant/views/PublicationViewer/index.tsx
+++ b/Eplant/views/PublicationViewer/index.tsx
@@ -9,7 +9,6 @@ import ThumbnailLight from '../../../thumbnails/publication-viewer-light.png'
 import ThumbnailDark from '../../../thumbnails/publication-viewer.png'
 import { ViewDataError } from '@eplant/View/viewData'
 
-
 const PublicationViewer: View<PublicationViewerData> = {
   name: 'Publication viewer',
   id: 'publication-viewer',
@@ -22,15 +21,35 @@ const PublicationViewer: View<PublicationViewerData> = {
     return (
       <div>
         <Tabs value={tab} onChange={(e, val: TabValues) => setTab(val)}>
-          <Tab label="PUBLICATIONS" value="publications" />
-          <Tab label="GENE RIFS" value="geneRIFs" />
+          <Tab label='PUBLICATIONS' value='publications' />
+          <Tab label='GENE RIFS' value='geneRIFs' />
         </Tabs>
-        <div hidden={tab !== 'publications'} style={{background: theme.palette.background.paperOverlay, padding: '0rem 1rem', border: '1px solid', borderRadius: theme.shape.borderRadius, borderTopLeftRadius: 0, borderColor: theme.palette.background.edgeLight}}>
+        <div
+          hidden={tab !== 'publications'}
+          style={{
+            background: theme.palette.background.paperOverlay,
+            padding: '0rem 1rem',
+            border: '1px solid',
+            borderRadius: theme.shape.borderRadius,
+            borderTopLeftRadius: 0,
+            borderColor: theme.palette.background.edgeLight,
+          }}
+        >
           {tab === 'publications' && (
             <Publications publications={activeData.publications} />
           )}
         </div>
-        <div hidden={tab !== 'geneRIFs'} style={{background: theme.palette.background.paperOverlay, padding: '0rem 1rem', border: '1px solid', borderRadius: theme.shape.borderRadius, borderTopLeftRadius: 0, borderColor: theme.palette.background.edgeLight}}>
+        <div
+          hidden={tab !== 'geneRIFs'}
+          style={{
+            background: theme.palette.background.paperOverlay,
+            padding: '0rem 1rem',
+            border: '1px solid',
+            borderRadius: theme.shape.borderRadius,
+            borderTopLeftRadius: 0,
+            borderColor: theme.palette.background.edgeLight,
+          }}
+        >
           {tab === 'geneRIFs' && <GeneRIFs geneRIFs={activeData.geneRIFs} />}
         </div>
       </div>
@@ -44,18 +63,18 @@ const PublicationViewer: View<PublicationViewerData> = {
     return (
       <div>
         Data for this view comes from NCBI{' '}
-        <Link href="ftp://ftp.ncbi.nlm.nih.gov/gene/DATA/gene2pubmed.gz">
+        <Link href='ftp://ftp.ncbi.nlm.nih.gov/gene/DATA/gene2pubmed.gz'>
           Gene2Pubmed
         </Link>
         . Data for Gene RIFs comes from NCBI{' '}
-        <Link href="ftp://ftp.ncbi.nih.gov/gene/GeneRIF/generifs_basic.gz">
+        <Link href='ftp://ftp.ncbi.nih.gov/gene/GeneRIF/generifs_basic.gz'>
           Gene RIFs
         </Link>
       </div>
     )
   },
   header: ({ geneticElement }) => (
-    <Typography variant="h6">
+    <Typography variant='h6'>
       Publications related to {geneticElement?.id}
     </Typography>
   ),
diff --git a/Eplant/views/eFP/EFPPreview.tsx b/Eplant/views/eFP/EFPPreview.tsx
index d10f80bc..b217ca3d 100644
--- a/Eplant/views/eFP/EFPPreview.tsx
+++ b/Eplant/views/eFP/EFPPreview.tsx
@@ -70,7 +70,7 @@ export default function EFPPreview({
           }}
         >
           <Typography
-            variant="caption"
+            variant='caption'
             sx={{ marginLeft: '4px', fontWeight: 'light' }}
           >
             Max: {Math.round(dataDeferred.max)}
@@ -83,7 +83,7 @@ export default function EFPPreview({
     component
   ) : (
     <EFPPreviewContainer selected={selected} {...boxProps}>
-      <Skeleton variant="rectangular" width="100%" height="100%" />
+      <Skeleton variant='rectangular' width='100%' height='100%' />
     </EFPPreviewContainer>
   )
 }
diff --git a/Eplant/views/eFP/Tooltips/EFPTooltip.tsx b/Eplant/views/eFP/Tooltips/EFPTooltip.tsx
index ea0c4ede..9b4f5118 100644
--- a/Eplant/views/eFP/Tooltips/EFPTooltip.tsx
+++ b/Eplant/views/eFP/Tooltips/EFPTooltip.tsx
@@ -31,32 +31,33 @@ export const setStroke = (
   }
 }
 
-function KeyValueRow(props: {
-  label: string,
-  value: string | number
-}) {
-
-  return <TableRow>
-  <TableCell
-    sx={theme => ({
-      color: theme.palette.text.secondary,
-      textAlign: 'left',
-      border: 'none',
-      paddingTop: 0,
-      paddingBottom: 0,
-    })}
-  >
-    {props.label}
-  </TableCell>
-  <TableCell
-      sx={theme => ({
-      color: theme.palette.text.primary,
-      textAlign: 'right',
-      border: 'none',
-      paddingTop: 0,
-      paddingBottom: 0,
-    })}>{props.value}</TableCell>
-</TableRow>
+function KeyValueRow(props: { label: string; value: string | number }) {
+  return (
+    <TableRow>
+      <TableCell
+        sx={(theme) => ({
+          color: theme.palette.text.secondary,
+          textAlign: 'left',
+          border: 'none',
+          paddingTop: 0,
+          paddingBottom: 0,
+        })}
+      >
+        {props.label}
+      </TableCell>
+      <TableCell
+        sx={(theme) => ({
+          color: theme.palette.text.primary,
+          textAlign: 'right',
+          border: 'none',
+          paddingTop: 0,
+          paddingBottom: 0,
+        })}
+      >
+        {props.value}
+      </TableCell>
+    </TableRow>
+  )
 }
 
 function SVGTooltip(props: {
@@ -102,21 +103,32 @@ function SVGTooltip(props: {
               paddingBottom: 1.5,
             })}
           >
-            <Table size="small">
+            <Table size='small'>
               <TableBody>
-                <TableRow> 
-                  <TableCell colSpan={2} sx={{
-                    fontSize: 'medium',
-                    fontWeight: '500',
-                    border: 'none'
-                  }}>
-                  {props.tissue.name}
+                <TableRow>
+                  <TableCell
+                    colSpan={2}
+                    sx={{
+                      fontSize: 'medium',
+                      fontWeight: '500',
+                      border: 'none',
+                    }}
+                  >
+                    {props.tissue.name}
                   </TableCell>
                 </TableRow>
-                <KeyValueRow label="Level" value={`${props.tissue.mean.toFixed(2)}±${props.tissue.std.toFixed(2)}`}/>
-                <KeyValueRow label="Log2 fold change vs control" value={Math.log2(
-                          props.tissue.mean / (props.data.control ?? 1),
-                        ).toFixed(2)}/>
+                <KeyValueRow
+                  label='Level'
+                  value={`${props.tissue.mean.toFixed(
+                    2,
+                  )}±${props.tissue.std.toFixed(2)}`}
+                />
+                <KeyValueRow
+                  label='Log2 fold change vs control'
+                  value={Math.log2(
+                    props.tissue.mean / (props.data.control ?? 1),
+                  ).toFixed(2)}
+                />
               </TableBody>
             </Table>
           </Box>
diff --git a/Eplant/views/eFP/Tooltips/cellEFPTooltip.tsx b/Eplant/views/eFP/Tooltips/cellEFPTooltip.tsx
index 670b4e46..428a9e42 100644
--- a/Eplant/views/eFP/Tooltips/cellEFPTooltip.tsx
+++ b/Eplant/views/eFP/Tooltips/cellEFPTooltip.tsx
@@ -55,7 +55,7 @@ function CellSVGTooltip(props: {
               borderRadius: 1,
             })}
           >
-            <Table size="small">
+            <Table size='small'>
               <TableBody>
                 <TableRow>
                   <TableCell>
diff --git a/Eplant/views/eFP/Viewer/EFPViewerCitation.tsx b/Eplant/views/eFP/Viewer/EFPViewerCitation.tsx
new file mode 100644
index 00000000..2abfbce3
--- /dev/null
+++ b/Eplant/views/eFP/Viewer/EFPViewerCitation.tsx
@@ -0,0 +1,52 @@
+import { Link } from '@mui/material'
+
+interface IEFPViewerCitationProps {
+  viewID: string
+  citation: { [key: string]: string }
+  xmlData: string[]
+}
+const EFPViewerCitation = ({
+  viewID,
+  citation,
+  xmlData,
+}: IEFPViewerCitationProps) => {
+  return (
+    // Need to set inner HTML to capture nested HTML tags in some citations
+    <div>
+      <div dangerouslySetInnerHTML={{ __html: citation.source }} />
+      {citation.notes && (
+        <p
+          style={{ marginTop: '1em' }}
+          dangerouslySetInnerHTML={{ __html: citation.notes }}
+        />
+      )}
+      {citation.URL && (
+        <a href={citation.URL}>
+          <p>citation.URL</p>
+        </a>
+      )}
+      {xmlData.length > 0 && (
+        <ul>
+          {xmlData.map((item, index) => {
+            if (item) {
+              return <li key={index}> {item}</li>
+            }
+          })}
+        </ul>
+      )}
+      <p>
+        This image was generated with the {viewID} at bar.utoronto.ca/eplant by
+        Waese et al. 2017.
+      </p>
+      <Link href='http://creativecommons.org/licenses/by/4.0/'>
+        <img
+          alt='Creative Commons License'
+          src='https://i.creativecommons.org/l/by/4.0/80x15.png'
+          title='The ePlant output for your gene of interest is available under a Creative Commons Attribution 4.0 International License and may be freely used in publications etc.'
+        />
+      </Link>
+    </div>
+  )
+}
+
+export default EFPViewerCitation
diff --git a/Eplant/views/eFP/Viewer/GeneDistributionChart.tsx b/Eplant/views/eFP/Viewer/GeneDistributionChart.tsx
index 8e36b735..2facb1e6 100644
--- a/Eplant/views/eFP/Viewer/GeneDistributionChart.tsx
+++ b/Eplant/views/eFP/Viewer/GeneDistributionChart.tsx
@@ -47,45 +47,48 @@ const GeneDistributionChart = ({ data }: { data: EFPData }) => {
     >
       {geneRanking ? (
         <svg
-          xmlns="http://www.w3.org/2000/svg"
-          xmlSpace="preserve"
+          xmlns='http://www.w3.org/2000/svg'
+          xmlSpace='preserve'
           width={90}
           height={56}
-          viewBox="0 0 960 600"
+          viewBox='0 0 960 600'
         >
-          <path fill="none" stroke="red" strokeWidth={6} d={lineCoords} />
+          <path fill='none' stroke='red' strokeWidth={6} d={lineCoords} />
           <circle
             cx={xVal}
             cy={200}
             r={20}
-            fill="red"
-            stroke="red"
+            fill='red'
+            stroke='red'
             strokeWidth={6}
           />
           <path
-            fill="none"
+            fill='none'
             stroke={theme.palette.secondary.contrastText}
             strokeWidth={10}
-            d="M144 587h580"
+            d='M144 587h580'
           />
           <path
-            fill="none"
+            fill='none'
             stroke={theme.palette.secondary.contrastText}
             strokeWidth={6}
-            d="M144 579c58 0 114-1 172-1 54 0 107-1 161-2 49-1 99-2 149-6 20-1 40-2 59-10 11-4 20-8 26-21 6-11 8-23 9-36 4-32 2-68 3-102V262"
+            d='M144 579c58 0 114-1 172-1 54 0 107-1 161-2 49-1 99-2 149-6 20-1 40-2 59-10 11-4 20-8 26-21 6-11 8-23 9-36 4-32 2-68 3-102V262'
           />
         </svg>
       ) : (
         <div></div>
       )}
-      <div style={{
-        fontSize: '12px',
-        marginLeft: '11px',
-      }}> 
-      {geneRanking ? 
-        `${Math.round(parseFloat(geneRanking.percentile))}% expression level`
-        : ''
-      }
+      <div
+        style={{
+          fontSize: '12px',
+          marginLeft: '11px',
+        }}
+      >
+        {geneRanking
+          ? `${Math.round(
+              parseFloat(geneRanking.percentile),
+            )}% expression level`
+          : ''}
       </div>
     </div>
   )
diff --git a/Eplant/views/eFP/Viewer/MaskModal.tsx b/Eplant/views/eFP/Viewer/MaskModal.tsx
index aa22bbb9..e9a407af 100644
--- a/Eplant/views/eFP/Viewer/MaskModal.tsx
+++ b/Eplant/views/eFP/Viewer/MaskModal.tsx
@@ -1,6 +1,13 @@
 // Import necessary dependencies from Material-UI
 import React, { useState } from 'react'
-import { Modal, Slider, Typography, Button, useTheme, DialogTitle} from '@mui/material'
+import {
+  Modal,
+  Slider,
+  Typography,
+  Button,
+  useTheme,
+  DialogTitle,
+} from '@mui/material'
 import { EFPViewerState } from './types'
 
 // Modal component with a slider
@@ -26,46 +33,56 @@ const MaskModal = ({ state, onClose, onSubmit }: MaskModalProps) => {
     onSubmit(sliderValue)
     onClose()
   }
-    return (
-        <Modal open={state.maskModalVisible} onClose={handleClose}>
-            <div style={{
-                width: 500,
-                padding: 16,
-                gap: 16,
-                background: theme.palette.background.paperOverlay,
-                margin: 'auto',
-                marginTop: 100,
-                borderRadius: '8px',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'space-between',
-            }}>
-            <DialogTitle sx={{minWidth: '512px', padding: 0}}>
-                Mask data
-            </DialogTitle>
-                <Typography variant="body2" gutterBottom>
-                    Mask samples if the expression level is below a given percentile of the standard deviation.
-                </Typography>
-                <Slider
-                    value={sliderValue}
-                    onChange={handleSliderChange}
-                    valueLabelDisplay="on"
-                    valueLabelFormat={(value) => `${value}%`}
-                    min={0}
-                    max={100}
-                    sx={{ width: 400}}
-                />
-                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                    <Button onClick={handleClose} style={{ marginRight: 8, color: theme.palette.secondary.main }}>
-                        Cancel
-                    </Button>
-                    <Button variant="contained" sx={{ background: theme.palette.primary.main }} onClick={handleSubmit}>
-                        Mask Thresholds
-                    </Button>
-                </div>
-            </div>
-        </Modal>
-    );
-};
+  return (
+    <Modal open={state.maskModalVisible} onClose={handleClose}>
+      <div
+        style={{
+          width: 500,
+          padding: 16,
+          gap: 16,
+          background: theme.palette.background.paperOverlay,
+          margin: 'auto',
+          marginTop: 100,
+          borderRadius: '8px',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+        }}
+      >
+        <DialogTitle sx={{ minWidth: '512px', padding: 0 }}>
+          Mask data
+        </DialogTitle>
+        <Typography variant='body2' gutterBottom>
+          Mask samples if the expression level is below a given percentile of
+          the standard deviation.
+        </Typography>
+        <Slider
+          value={sliderValue}
+          onChange={handleSliderChange}
+          valueLabelDisplay='on'
+          valueLabelFormat={(value) => `${value}%`}
+          min={0}
+          max={100}
+          sx={{ width: 400 }}
+        />
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Button
+            onClick={handleClose}
+            style={{ marginRight: 8, color: theme.palette.secondary.main }}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant='contained'
+            sx={{ background: theme.palette.primary.main }}
+            onClick={handleSubmit}
+          >
+            Mask Thresholds
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
 
 export default MaskModal
diff --git a/Eplant/views/eFP/Viewer/index.tsx b/Eplant/views/eFP/Viewer/index.tsx
index 3d55507a..d09ba6f1 100644
--- a/Eplant/views/eFP/Viewer/index.tsx
+++ b/Eplant/views/eFP/Viewer/index.tsx
@@ -3,7 +3,14 @@ import PanZoom from '@eplant/util/PanZoom'
 import { View, ViewProps } from '@eplant/View'
 import { ViewDataError } from '@eplant/View/viewData'
 import { Box, MenuItem, Tooltip, Typography } from '@mui/material'
-import React, { startTransition } from 'react'
+import React, {
+  memo,
+  startTransition,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import EFP from '..'
 import EFPPreview from '../EFPPreview'
 import { EFPViewerAction, EFPViewerData, EFPViewerState } from './types'
@@ -19,7 +26,9 @@ import NotSupported from '@eplant/UI/Layout/ViewNotSupported'
 import Dropdown from '@eplant/UI/Dropdown'
 import { red } from '@mui/material/colors'
 import GeneDistributionChart from './GeneDistributionChart'
+import { getCitation } from '@eplant/util/citations'
 import MaskModal from './MaskModal'
+import EFPViewerCitation from './EFPViewerCitation'
 
 type EFPListProps = {
   geneticElement: GeneticElement
@@ -36,10 +45,16 @@ type EFPListProps = {
   maskThreshold: number
 }
 
-const EFPListItem = React.memo(
+interface ICitationProps {
+  activeData?: EFPViewerData
+  state?: EFPViewerState
+  gene?: GeneticElement | null
+}
+
+const EFPListItem = memo(
   function EFPRow({ index: i, data }: { index: number; data: EFPListProps }) {
     return (
-      <Tooltip placement="right" arrow title={<div>{data.views[i].name}</div>}>
+      <Tooltip placement='right' arrow title={<div>{data.views[i].name}</div>}>
         <div>
           <EFPPreview
             sx={() => ({
@@ -76,7 +91,7 @@ const EFPListItem = React.memo(
   },
 )
 
-const EFPListRow = React.memo(function EFPListRow({
+const EFPListRow = memo(function EFPListRow({
   style,
   index,
   data,
@@ -213,39 +228,36 @@ export default class EFPViewer
         return state
     }
   }
-  component = (
-    props: ViewProps<EFPViewerData, EFPViewerState, EFPViewerAction>,
-  ) => {
-    const viewIndices: number[] = [
-      ...Array(props.activeData.views.length).keys(),
-    ]
+  component = ({
+    activeData,
+    state,
+    dispatch,
+    geneticElement,
+  }: ViewProps<EFPViewerData, EFPViewerState, EFPViewerAction>) => {
+    const viewIndices: number[] = [...Array(activeData.views.length).keys()]
     viewIndices.sort((a, b) => {
-      if (props.state.sortBy == 'name')
-        return props.activeData.views[a].name.localeCompare(
-          props.activeData.views[b].name,
-        )
+      if (state.sortBy == 'name')
+        return activeData.views[a].name.localeCompare(activeData.views[b].name)
       else {
-        return (
-          props.activeData.viewData[b].max - props.activeData.viewData[a].max
-        )
+        return activeData.viewData[b].max - activeData.viewData[a].max
       }
     })
-    const sortedViews = viewIndices.map((i) => props.activeData.views[i])
-    const sortedViewData = viewIndices.map((i) => props.activeData.viewData[i])
+    const sortedViews = viewIndices.map((i) => activeData.views[i])
+    const sortedViewData = viewIndices.map((i) => activeData.viewData[i])
     const sortedEfps = viewIndices.map((i) => this.efps[i])
 
-    let activeViewIndex = React.useMemo(
-      () => sortedEfps.findIndex((v) => v.id == props.state.activeView),
-      [props.state.activeView, ...sortedEfps.map((v) => v.id)],
+    let activeViewIndex = useMemo(
+      () => sortedEfps.findIndex((v) => v.id == state.activeView),
+      [state.activeView, ...sortedEfps.map((v) => v.id)],
     )
     if (activeViewIndex == -1) {
       activeViewIndex = 0
-      props.dispatch({
+      dispatch({
         type: 'set-view',
         id: sortedEfps[0].id,
       })
     }
-    const efp = React.useMemo(() => {
+    const efp = useMemo(() => {
       const Component = sortedEfps[activeViewIndex].component
       return (
         <Component
@@ -253,26 +265,26 @@ export default class EFPViewer
             ...sortedViewData[activeViewIndex],
           }}
           state={{
-            colorMode: props.state.colorMode,
+            colorMode: state.colorMode,
             renderAsThumbnail: false,
-            maskThreshold: props.state.maskThreshold,
+            maskThreshold: state.maskThreshold,
           }}
-          geneticElement={props.geneticElement}
+          geneticElement={geneticElement}
           dispatch={() => {}}
         />
       )
     }, [
       activeViewIndex,
-      props.geneticElement?.id,
-      props.dispatch,
+      geneticElement?.id,
+      dispatch,
       sortedViewData[activeViewIndex],
-      props.state.colorMode,
-      props.state.maskThreshold,
+      state.colorMode,
+      state.maskThreshold,
     ])
-    const ref = React.useRef<HTMLDivElement>(null)
+    const ref = useRef<HTMLDivElement>(null)
     const dimensions = useDimensions(ref)
 
-    if (!props.geneticElement) return <></>
+    if (!geneticElement) return <></>
     return (
       <Box
         sx={{
@@ -304,17 +316,15 @@ export default class EFPViewer
             {/* Dropdown menus for selecting a view and sort options */}
             <Box sx={{ marginBottom: 1, display: 'flex', gap: 1 }}>
               <Dropdown
-                color="secondary"
-                variant="text"
-                size="small"
+                color='secondary'
+                variant='text'
+                size='small'
                 sx={{ padding: '0.25rem 0.5rem', minWidth: 'fit-content' }}
                 endIcon={undefined}
                 options={sortedViews.map((view) => (
                   <MenuItem
-                    selected={props.state.activeView == view.id ? true : false}
-                    onClick={() =>
-                      props.dispatch({ type: 'set-view', id: view.id })
-                    }
+                    selected={state.activeView == view.id ? true : false}
+                    onClick={() => dispatch({ type: 'set-view', id: view.id })}
                     key={view.id}
                   >
                     {view.name}
@@ -324,28 +334,24 @@ export default class EFPViewer
                 View
               </Dropdown>
               <Dropdown
-                variant="text"
-                size="small"
+                variant='text'
+                size='small'
                 sx={{ padding: '0.25rem 0.5rem', minWidth: 'fit-content' }}
                 endIcon={undefined}
-                color="secondary"
+                color='secondary'
                 options={[
                   <MenuItem
-                    selected={props.state.sortBy == 'name' ? true : false}
-                    key="byName"
-                    onClick={() =>
-                      props.dispatch({ type: 'sort-by', by: 'name' })
-                    }
+                    selected={state.sortBy == 'name' ? true : false}
+                    key='byName'
+                    onClick={() => dispatch({ type: 'sort-by', by: 'name' })}
                   >
                     By name
                   </MenuItem>,
                   <MenuItem
-                    selected={
-                      props.state.sortBy == 'expression-level' ? true : false
-                    }
-                    key="byExpression"
+                    selected={state.sortBy == 'expression-level' ? true : false}
+                    key='byExpression'
                     onClick={() =>
-                      props.dispatch({
+                      dispatch({
                         type: 'sort-by',
                         by: 'expression-level',
                       })
@@ -362,12 +368,12 @@ export default class EFPViewer
             <EFPListMemoized
               height={dimensions.height - 5}
               activeView={sortedEfps[activeViewIndex]}
-              dispatch={props.dispatch}
+              dispatch={dispatch}
               viewData={sortedViewData}
-              geneticElement={props.geneticElement}
+              geneticElement={geneticElement}
               views={sortedEfps}
-              colorMode={props.state.colorMode}
-              maskThreshold={props.state.maskThreshold}
+              colorMode={state.colorMode}
+              maskThreshold={state.maskThreshold}
             />
           </Box>
           {/* main canvas area */}
@@ -375,25 +381,20 @@ export default class EFPViewer
             sx={(theme) => ({
               flexGrow: 1,
               position: 'relative',
-              overflow: 'hidden',
-              background: theme.palette.background.paperOverlay,
-              border: `1px solid`,
-              borderColor: theme.palette.background.edge,
-              borderRadius: theme.shape.borderRadius + 'px',
             })}
           >
-            {props.activeData.viewData[activeViewIndex].supported ? (
+            {activeData.viewData[activeViewIndex].supported ? (
               <>
-                {props.activeData.views[activeViewIndex].name !== 'cellEFP' && (
+                {activeData.views[activeViewIndex].name !== 'cellEFP' && (
                   <GeneDistributionChart
-                    data={{ ...props.activeData.viewData[activeViewIndex] }}
+                    data={{ ...activeData.viewData[activeViewIndex] }}
                   />
                 )}
                 <MaskModal
-                  state={props.state}
-                  onClose={() => props.dispatch({ type: 'toggle-mask-modal' })}
+                  state={state}
+                  onClose={() => dispatch({ type: 'toggle-mask-modal' })}
                   onSubmit={(threshold) =>
-                    props.dispatch({
+                    dispatch({
                       type: 'set-mask-threshold',
                       threshold: threshold,
                     })
@@ -407,12 +408,12 @@ export default class EFPViewer
                     zIndex: 10,
                   })}
                   data={{
-                    ...props.activeData.viewData[activeViewIndex],
+                    ...activeData.viewData[activeViewIndex],
                   }}
                   state={{
-                    colorMode: props.state.colorMode,
+                    colorMode: state.colorMode,
                     renderAsThumbnail: false,
-                    maskThreshold: props.state.maskThreshold,
+                    maskThreshold: state.maskThreshold,
                   }}
                 />
                 <PanZoom
@@ -424,9 +425,9 @@ export default class EFPViewer
                     height: '100%',
                     zIndex: 0,
                   })}
-                  transform={props.state.transform}
+                  transform={state.transform}
                   onTransformChange={(transform) => {
-                    props.dispatch({
+                    dispatch({
                       type: 'set-transform',
                       transform,
                     })
@@ -444,7 +445,7 @@ export default class EFPViewer
                 }}
               >
                 <NotSupported
-                  geneticElement={props.geneticElement}
+                  geneticElement={geneticElement}
                   view={sortedEfps[activeViewIndex]}
                 ></NotSupported>
               </div>
@@ -471,10 +472,60 @@ export default class EFPViewer
   header: View<EFPViewerData, EFPViewerState, EFPViewerAction>['header'] = (
     props,
   ) => (
-    <Typography variant="h6">
+    <Typography variant='h6'>
       {props.activeData.views.find((v) => v.id == props.state.activeView)?.name}
       {': '}
       {props.geneticElement?.id}
     </Typography>
   )
+
+  citation = ({ activeData, state, gene }: ICitationProps) => {
+    const [xmlData, setXMLData] = useState<string[]>([])
+
+    const viewID = activeData?.views.find((v) => v.id == state?.activeView)
+      ?.name
+    const viewXML = activeData?.views.find((v) => v.id == state?.activeView)
+      ?.xmlURL
+    useEffect(() => {
+      const xmlLoad = async () => {
+        let xmlString = ''
+        if (viewXML) {
+          try {
+            const response = await fetch(viewXML)
+            const data = await response.text()
+            xmlString = data
+          } catch (error) {
+            console.error('Error fetching xmlData:', error)
+          }
+        }
+
+        // Extract <li> tags
+        if (xmlString !== '') {
+          const parser = new DOMParser()
+          const xmlDoc = parser.parseFromString(xmlString, 'text/xml')
+          const listItems = xmlDoc.querySelectorAll('info li')
+          const itemsArray = Array.from(listItems).map((liElement) =>
+            liElement.textContent ? liElement.textContent : '',
+          )
+          setXMLData(itemsArray)
+        } else {
+          setXMLData([])
+        }
+      }
+      xmlLoad()
+    }, [viewXML])
+
+    if (viewID) {
+      const citation = getCitation(viewID) as { [key: string]: string }
+      return (
+        <EFPViewerCitation
+          viewID={viewID}
+          citation={citation}
+          xmlData={xmlData}
+        ></EFPViewerCitation>
+      )
+    } else {
+      return <p>No Citation information provided.</p>
+    }
+  }
 }
diff --git a/Eplant/views/eFP/index.tsx b/Eplant/views/eFP/index.tsx
index acb34f6c..838629af 100644
--- a/Eplant/views/eFP/index.tsx
+++ b/Eplant/views/eFP/index.tsx
@@ -299,7 +299,7 @@ export default class EFP implements View<EFPData, EFPState, EFPAction> {
     geneticElement,
   }) => {
     return (
-      <Typography variant="h6">
+      <Typography variant='h6'>
         {this.name} for {geneticElement?.id}
       </Typography>
     )
diff --git a/tsconfig.json b/tsconfig.json
index a88995e6..feef5f8d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "paths": {
       "@eplant/*": ["Eplant/*"],
       "@stories/*": ["stories/*"]