diff --git a/web/components/PT/PortableTextBlock.js b/web/components/PT/PortableTextBlock.js
index 80d7824fa3c48aaa22173a25dae5e65420d0b1d8..0199760058c5ceb30919a4a9da924e0cae0392f3 100644
--- a/web/components/PT/PortableTextBlock.js
+++ b/web/components/PT/PortableTextBlock.js
@@ -26,6 +26,7 @@ import {
 } from '../Sections'
 import ActorInsert from './Inserts/ActorInsert'
 import PlaceInsert from './Inserts/PlaceInsert'
+import { getFootnotesNumberArray } from '../../lib/utils'
 
 const BlockContent = require('@sanity/block-content-to-react')
 
@@ -45,6 +46,8 @@ export default function PortableTextBlock(props) {
     ...rest
   } = props
 
+  const footnoteNumbers = getFootnotesNumberArray(props.blocks)
+
   const getFontSize = (level) => {
     switch (level) {
       case 'h2':
@@ -115,20 +118,23 @@ export default function PortableTextBlock(props) {
           <Link href={href}>{text}</Link>
         )
       },
-      footnote: ({ children, markKey }) => (
-        <span>
-          {children}
-          <sup>
-            {/* 
+      footnote: ({ children, markKey }) => {
+        console.log(markKey)
+        return (
+          <span>
+            {children}
+            <sup>
+              {/* 
               https://codesandbox.io/s/how-to-render-footnotes-in-portable-text-in-react-iupur?file=/src/index.js:254-650
               If you want numbers here, you can reuse the reduce function from Footnotes.js
               to e.g. an object with markKey as keys and the index as values.
               {[markKey]: index}. 
             */}
-            <a href={`#${markKey}`}>*</a>
-          </sup>
-        </span>
-      ),
+              <a href={`#${markKey}`}>{footnoteNumbers[markKey]}</a>
+            </sup>
+          </span>
+        )
+      },
     },
     types: {
       code: (props) => (
diff --git a/web/lib/utils/getFootnotesNumberArray.js b/web/lib/utils/getFootnotesNumberArray.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ea4f0a9990b291bff10fbbc9ef9e5b621a447e4
--- /dev/null
+++ b/web/lib/utils/getFootnotesNumberArray.js
@@ -0,0 +1,21 @@
+/**
+ * getFootnoteNumberArray
+ * return object
+ */
+export const getFootnotesNumberArray = (blocks) => {
+  return (
+    blocks
+      // filter out everything that's not a text block
+      .filter(({ _type }) => _type === 'block')
+      // make an array of the mark definitions of those blocks
+      .reduce((acc, curr) => {
+        return [...acc, ...curr.markDefs]
+      }, [])
+      // find all the footnote mark definitions
+      .filter(({ _type }) => _type === 'footnote')
+      // reduce to object with mark as key and index as value
+      .reduce(function (acc, curr, index) {
+        return { ...acc, [curr._key]: index + 1 }
+      }, {})
+  )
+}
diff --git a/web/lib/utils/index.js b/web/lib/utils/index.js
index 63bcdadad625adc14147b522ecc9c8b8ad561e0d..6f153fa787ba02bafa37c444a99255ed3e87d7b8 100644
--- a/web/lib/utils/index.js
+++ b/web/lib/utils/index.js
@@ -1,3 +1,4 @@
 export * from './capitalize'
 export * from './convertQuotationMarks'
+export * from './getFootnotesNumberArray'
 export * from './getOpenGraphImages'