diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 7014c2c2..dd84ea78 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve
 title: ''
-labels: Bug | Bogue
+labels: ''
 assignees: ''
 
 ---
diff --git a/.github/ISSUE_TEMPLATE/testing-issue.md b/.github/ISSUE_TEMPLATE/testing-issue.md
new file mode 100644
index 00000000..af1f1915
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/testing-issue.md
@@ -0,0 +1,39 @@
+---
+name: Issue from testing with users
+about: Report issue encountered by participants during evaluative research study
+title: ''
+labels: Research
+assignees: ''
+
+---
+
+<!-- Do not include any details that could be used to identify the participant. For example: names, participant ID #s, links to raw notes or workspaces, gender, department or team, specific role or project, location etc. If unsure please check with research lead or team lead. -->
+
+📆 **Study info**
+<!--_study name + Month + Year + lead_-->
+
+## 🚦 Issue severity 
+<!--_Was the participant able to reach their goal? Choose one._-->
+🟡 Minor - Yes, after overcoming minor difficulty and/or confusion.
+🔶 Moderate – Yes, after overcoming significant difficulty and/or confusion.
+🟥 Severe - No, the participant wasn't able to reach their goal or was unaware of an error that will prevent them from reaching their goal.
+
+💚 Enabler - This helped the participant do something more effectively or efficiently. 
+
+## 📝 What happened?
+<!--_Describe in as much detail as possible what happened during the research session relating to this issue._-->
+
+## 💬 In the participant's own words
+<!--_Include a quote from the participant on this issue (if available)._-->
+
+## 📗 User story
+
+As a ___, I need __, so that ___.
+
+
+## 📜 Recommendations
+<!-- Make one or recommendations on what might solve the problem. Even if the solution is ultimately something different, this is helpful for understanding what aspect of the product needs to change (e.g. content, information architecture, interactions)-->
+- [ ] 
+
+
+## ℹ️ More info
diff --git a/app/components/Breadcrumbs.vue b/app/components/Breadcrumbs.vue
index f22cc0e7..9ea4358a 100644
--- a/app/components/Breadcrumbs.vue
+++ b/app/components/Breadcrumbs.vue
@@ -8,7 +8,6 @@
           :to="localePath(homePath, breadcrumbs.locale)"
           class="font-medium text-xl hover:text-blue-800 hover:underline"
         >
-          <!-- {{ breadcrumbs.locale === 'en' ? 'Home' : 'Accueil' }} -->
           {{ $t('home') }}
         </nuxt-link>
         <font-awesome-icon
@@ -22,18 +21,6 @@
         :key="breadcrumb.name"
         class="whitespace-nowrap"
       >
-        <!-- For dynamic path -->
-        <!-- <nuxt-link
-          :to="
-            localePath({
-              name: 'topic-topic',
-              params: { topic: breadcrumb.urlSlug, name: breadcrumb.name },
-            })
-          "
-          class="font-medium hover:text-blue-800 hover:underline"
-        >-->
-
-        <!-- For full static site -->
         <nuxt-link
           :to="breadcrumb.path"
           class="font-medium text-xl hover:text-blue-800 hover:underline"
diff --git a/app/components/Header.vue b/app/components/Header.vue
index f1053c9b..94a9f47e 100644
--- a/app/components/Header.vue
+++ b/app/components/Header.vue
@@ -42,9 +42,17 @@
           <div
             class="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
           >
-            <v-menu v-model="menuOpened" bottom :offset-y="true" class="mr-4">
+            <v-menu
+              v-model="menuOpened"
+              bottom
+              nudge-left="60"
+              :offset-y="true"
+              class="mr-6"
+              attach="#menuButton"
+            >
               <template #activator="{ on }">
                 <button
+                  id="menuButton"
                   class="p-3 text-xl rounded-lg hover:bg-gray-100"
                   v-on="on"
                 >
@@ -77,8 +85,12 @@
                   </nuxt-link>
                 </v-list-item>
               </v-list>
-              <v-list v-else>
-                <v-list-item v-for="(topic, index) in topicsFR" :key="index">
+              <v-list v-else class="w-max">
+                <v-list-item
+                  v-for="(topic, index) in topicsFR"
+                  :key="index"
+                  class="hover:bg-blue-100 cursor-pointer"
+                >
                   <nuxt-link
                     :to="localePath(`/sujet/${topic.urlSlug}`, 'fr')"
                     class="text-lg"
@@ -92,7 +104,7 @@
               v-for="locale in availableLocales"
               :key="locale.code"
               :href="switchLocalePath(locale.code)"
-              class="underline text-blue-900 hover:text-blue-700 text-xl ml-5"
+              class="underline text-blue-900 hover:text-blue-700 text-xl ml-12"
               :lang="locale.code"
               @click="switchLocale"
               >{{ locale.name }}
diff --git a/app/components/PageTitle.vue b/app/components/PageTitle.vue
deleted file mode 100644
index 71cd51ae..00000000
--- a/app/components/PageTitle.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <h1 class="text-4xl sm:text-5xl font-bold">{{ titleText }}</h1>
-</template>
-
-<script>
-export default {
-  name: 'PageTitle',
-
-  props: {
-    titleText: {
-      type: String,
-      required: true,
-    },
-  },
-}
-</script>
diff --git a/app/components/ResourceListItem.vue b/app/components/ResourceListItem.vue
index dcca6877..670919c6 100644
--- a/app/components/ResourceListItem.vue
+++ b/app/components/ResourceListItem.vue
@@ -1,17 +1,12 @@
 <!-- Component View ================================================================================================-->
 
 <template>
-  <div
-    class="py-5 px-1.5 rounded-2xl mb-4 hover:bg-gray-100 cursor-pointer drop-shadow-2xl -mx-2 w-fit"
-    @click="navigateToResource()"
+  <nuxt-link
+    :to="localePath(resource.path, resource.locale)"
+    class="text-2xl font-medium text-blue-800 underline hover:text-blue-700 inline-block py-5 hover:bg-gray-100 px-1.5 rounded-2xl cursor-pointer mb-4 w-fit -mx-2"
   >
-    <nuxt-link
-      :to="localePath(resource.path, resource.locale)"
-      class="text-2xl font-medium text-blue-800 underline hover:text-blue-700"
-    >
-      {{ resource.title }}
-    </nuxt-link>
-  </div>
+    {{ resource.title }}
+  </nuxt-link>
 </template>
 
 <!-- Component Logic ===============================================================================================-->
@@ -43,15 +38,5 @@ export default {
       locale: String,
     },
   },
-
-  // Methods ----------------------------------------------------------------------------------------------------------
-
-  methods: {
-    navigateToResource() {
-      this.$router.push(
-        this.localePath(this.resource.path, this.resource.locale)
-      )
-    },
-  },
 }
 </script>
diff --git a/app/components/r-html-tags/rH1.vue b/app/components/r-html-tags/rH1.vue
new file mode 100644
index 00000000..43652a68
--- /dev/null
+++ b/app/components/r-html-tags/rH1.vue
@@ -0,0 +1,17 @@
+<template>
+  <h1 class="text-4xl sm:text-5xl font-bold">{{ headingText }}</h1>
+</template>
+
+<script>
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'RH1',
+
+  props: {
+    headingText: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
diff --git a/app/components/r-html-tags/rP.vue b/app/components/r-html-tags/rP.vue
new file mode 100644
index 00000000..e9e7d180
--- /dev/null
+++ b/app/components/r-html-tags/rP.vue
@@ -0,0 +1,15 @@
+<!-- Component View ================================================================================================-->
+
+<template>
+  <p class="text-lg leading-relaxed tracking-wide text-gray-800 mt-5">
+    <slot></slot>
+  </p>
+</template>
+
+<!-- Component Logic ===============================================================================================-->
+
+<script>
+export default {
+  name: 'RP',
+}
+</script>
diff --git a/app/pages/about.vue b/app/pages/about.vue
index d847d185..99abb10c 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="max-w-5xl mb-10">
-    <h1 class="font-bold text-4xl my-14">{{ aboutPage.title }}</h1>
+    <breadcrumbs
+      :breadcrumbs="breadcrumbs"
+      :current-page-title="aboutPage.title"
+    >
+    </breadcrumbs>
+    <r-h1 :heading-text="aboutPage.title" class="my-10"></r-h1>
     <div v-html="richText"></div>
   </div>
 </template>
@@ -12,8 +17,11 @@ import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
 import { aboutPageQuery } from '@/utils/queries'
 import { getHeadElement } from '@/utils/headElementAssembler'
 import { richTextRenderOptions } from '@/utils/richTextRenderOptions'
+import RH1 from '@/components/r-html-tags/rH1'
 
 export default {
+  name: 'About',
+  components: { RH1 },
   // Options ----------------------------------------------------------------------------------------------------------
 
   nuxtI18n: {
@@ -23,8 +31,6 @@ export default {
     },
   },
 
-  name: 'About',
-
   async asyncData({ $contentfulApi, payload }) {
     const locale = payload && payload.locale ? payload.locale : 'en-CA'
 
@@ -42,14 +48,17 @@ export default {
 
     const i18nLocaleCode = locale.substring(0, 2)
 
+    const breadcrumbs = []
+    breadcrumbs.locale = i18nLocaleCode
+
     const headElement = getHeadElement(aboutPage.title, i18nLocaleCode)
 
     const richText = documentToHtmlString(
       aboutPage.body.json,
-      richTextRenderOptions
+      richTextRenderOptions()
     )
 
-    return { aboutPage, richText, headElement }
+    return { aboutPage, richText, headElement, breadcrumbs }
   },
 
   head() {
diff --git a/app/pages/collection/_collection.vue b/app/pages/collection/_collection.vue
index 95c49205..e8cdcca4 100644
--- a/app/pages/collection/_collection.vue
+++ b/app/pages/collection/_collection.vue
@@ -11,7 +11,8 @@
     <!-- Collection name & description - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
 
     <div class="my-24 sm:my-28">
-      <PageTitle :title-text="collection.name"></PageTitle>
+      <r-h1 :heading-text="collection.name"></r-h1>
+      <div class="md:w-2/3" v-html="descriptionRichText"></div>
     </div>
 
     <!-- Resources - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
@@ -61,6 +62,7 @@
 <!-- Page logic ====================================================================================================-->
 
 <script>
+import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
 import {
   generateBreadcrumbs,
   generateCollections,
@@ -70,10 +72,12 @@ import {
 import { getHeadElement } from '@/utils/headElementAssembler'
 import { getCollectionPageQuery } from '@/utils/queries'
 import CollectionListItem from '@/components/list-items/CollectionListItem'
+import { richTextRenderOptions } from '@/utils/richTextRenderOptions'
+import RH1 from '@/components/r-html-tags/rH1'
 
 export default {
   name: 'Collection',
-  components: { CollectionListItem },
+  components: { RH1, CollectionListItem },
   layout: 'expandedSearch',
 
   // Hooks ------------------------------------------------------------------------------------------------------------
@@ -141,12 +145,18 @@ export default {
       getLocaleCode(currentLocale)
     )
 
+    const descriptionRichText = documentToHtmlString(
+      collection.description?.json,
+      richTextRenderOptions()
+    )
+
     return {
       collection,
       breadcrumbs,
       resources,
       relatedCollections,
       headElement,
+      descriptionRichText,
     }
   },
 
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index 5bce26a1..95878bcd 100644
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="max-w-5xl mb-10">
-    <h1 class="font-bold text-4xl my-14">{{ contactPage.title }}</h1>
+    <breadcrumbs
+      :breadcrumbs="breadcrumbs"
+      :current-page-title="contactPage.title"
+    >
+    </breadcrumbs>
+    <r-h1 :heading-text="contactPage.title" class="my-10"></r-h1>
     <div v-html="richText"></div>
   </div>
 </template>
@@ -12,8 +17,11 @@ import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
 import { aboutPageQuery } from '@/utils/queries'
 import { getHeadElement } from '@/utils/headElementAssembler'
 import { richTextRenderOptions } from '@/utils/richTextRenderOptions'
+import RH1 from '@/components/r-html-tags/rH1'
 
 export default {
+  name: 'Contact',
+  components: { RH1 },
   // Options ----------------------------------------------------------------------------------------------------------
 
   nuxtI18n: {
@@ -23,8 +31,6 @@ export default {
     },
   },
 
-  name: 'Contact',
-
   // Hooks ------------------------------------------------------------------------------------------------------------
 
   async asyncData({ $contentfulApi, payload }) {
@@ -45,14 +51,17 @@ export default {
 
     const i18nLocaleCode = locale.substring(0, 2)
 
+    const breadcrumbs = []
+    breadcrumbs.locale = i18nLocaleCode
+
     const headElement = getHeadElement(contactPage.title, i18nLocaleCode)
 
     const richText = documentToHtmlString(
       contactPage.body.json,
-      richTextRenderOptions
+      richTextRenderOptions()
     )
 
-    return { contactPage, richText, headElement }
+    return { contactPage, richText, headElement, breadcrumbs }
   },
 
   head() {
diff --git a/app/pages/legal/_legal.vue b/app/pages/legal/_legal.vue
index 6beef0ca..9bd063ad 100644
--- a/app/pages/legal/_legal.vue
+++ b/app/pages/legal/_legal.vue
@@ -3,7 +3,12 @@
 <template>
   <div class="mb-10">
     <div class="max-w-5xl">
-      <h1 class="font-bold text-4xl my-14">{{ legalPage.title }}</h1>
+      <breadcrumbs
+        :breadcrumbs="breadcrumbs"
+        :current-page-title="legalPage.title"
+      >
+      </breadcrumbs>
+      <r-h1 :heading-text="legalPage.title" class="my-10"></r-h1>
       <div v-html="richText"></div>
     </div>
   </div>
@@ -12,33 +17,26 @@
 <!-- Page Logic - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
 <script>
-import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types'
 import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
-import { legalEntryQuery, legalPageQuery } from '@/utils/queries'
 import { getHeadElement } from '@/utils/headElementAssembler'
+import { richTextRenderOptions } from '@/utils/richTextRenderOptions'
+import { legalPageQuery } from '@/utils/queries'
+import RH1 from '@/components/r-html-tags/rH1'
 
 export default {
+  components: { RH1 },
   // Hooks ------------------------------------------------------------------------------------------------------------
 
   async asyncData({ params, store, $contentfulApi, payload }) {
     const currentLocale = payload && payload.locale ? payload.locale : 'en-CA'
 
-    // const currentLocale = currentLocale.includes('en') ? 'fr-CA' : 'en-CA'
     const alternateLocale = currentLocale.includes('en') ? 'fr-CA' : 'en-CA'
     const isDefaultLocale = currentLocale.includes('en') || false
 
-    /* Get urlSlug */
-
     const urlSlug = params.legal
 
     const pageQuery = legalPageQuery(urlSlug, currentLocale, alternateLocale)
 
-    /* Fetch data */
-
-    // $contentfulApi.setToken(process.env.CTF_CDA_ACCESS_TOKEN, 'Bearer')
-    // const endpoint = `https://graphql.contentful.com/content/v1/spaces/${process.env.CTF_SPACE_ID}`
-
-    // Get en
     let legalPage
     if (payload && payload.legalPage) {
       legalPage = { ...payload.legalPage }
@@ -46,28 +44,16 @@ export default {
       legalPage = await $contentfulApi
         .$post('', { query: pageQuery })
         .then((res) => {
-          // console.log('_legal.vue', pageQuery, res)
           return res.data.legalPageCollection.items[0]
         })
     }
 
     const localeCode = currentLocale.substring(0, 2)
+    const breadcrumbs = []
+    breadcrumbs.locale = localeCode
 
     const headElement = getHeadElement(legalPage.title, localeCode)
 
-    /* Set alternate url slug */
-
-    // TODO: Check if this is actually needed
-    // if (legalPage == null) {
-    //   app.i18n.setLocaleCookie('fr')
-    //
-    //   legalPage = await $contentfulApi
-    //     .$post('', { query: contentfulQuery })
-    //     .then((res) => {
-    //       return res.data.legalPageCollection.items[0]
-    //     })
-    // }
-
     const alternateLocaleUrlSlug = legalPage.urlSlug
 
     let enRouteParam = null
@@ -86,73 +72,12 @@ export default {
       fr: { legal: frRouteParam },
     })
 
-    /* Set rich text rendering options */
-
-    const richTextOptions = {
-      renderMark: {
-        [MARKS.BOLD]: (text) => {
-          console.log(text)
-          return `<strong class="font-bold">${text}</strong>`
-        },
-        [MARKS.ITALIC]: (text) => {
-          return `<i class="italic">${text}</i>`
-        },
-      },
-      renderNode: {
-        [INLINES.HYPERLINK]: (node) => {
-          return `<a class="text-blue-900 underline" href="${node.data.uri}">${node.content[0].value}</a>`
-        },
-        [INLINES.ENTRY_HYPERLINK]: (node) => {
-          const entryId = node.data.target.sys.id
-
-          const pageQuery = legalEntryQuery(entryId)
-
-          const entry = $contentfulApi
-            .$post('', { query: pageQuery })
-            .then((res) => {
-              // console.log(res)
-              return res.data.legalPage
-            })
-
-          const path = '/legal/' + entry.urlSlug
-          console.log(path)
-          return `<nuxt-link class="text-blue-900 underline" :to="localePath(${path})">${node.content[0].value}</nuxt-link>`
-        },
-        [BLOCKS.HEADING_1]: (node) => {
-          return `<h1 class="text-3xl font-medium mt-12 mb-2.5" >${node.content[0].value}</h1>`
-        },
-        [BLOCKS.HEADING_2]: (node) => {
-          return `<h2 class="text-2xl font-medium mt-12 mb-2.5">${node.content[0].value}</h2>`
-        },
-        [BLOCKS.HEADING_3]: (node) => {
-          return `<h3 class="text-xl font-medium mt-12 mb-2.5">${node.content[0].value}</h3>`
-        },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        [BLOCKS.PARAGRAPH]: (node, next) => {
-          // return `<p class="leading-7">${node.content[0].value}</p>`
-          return `<p class="leading-relaxed text-xl tracking-wide text-gray-800">${next(
-            node.content
-          ).replace(/\n/g, '<br/>')}</p>`
-        },
-        [BLOCKS.UL_LIST]: (node, next) => {
-          // console.log(JSON.parse(JSON.stringify(node)))
-          return `<ul class="list-disc ml-4">
-                        ${next(node.content)}
-                    </ul>`
-        },
-        [BLOCKS.HR]: () => {
-          return `<div class="border-t border-gray-300 mt-10"></div>`
-        },
-      },
-    }
-
-    /* Apply rich text styling */
-
-    console.log(legalPage.body.json)
-
-    const richText = documentToHtmlString(legalPage.body.json, richTextOptions)
+    const richText = documentToHtmlString(
+      legalPage.body.json,
+      richTextRenderOptions(currentLocale, legalPage.body?.links)
+    )
 
-    return { legalPage, richText, headElement }
+    return { legalPage, richText, headElement, breadcrumbs }
   },
 
   head() {
diff --git a/app/pages/resource/_resource.vue b/app/pages/resource/_resource.vue
index 9c1ed5db..4d4cb5ed 100644
--- a/app/pages/resource/_resource.vue
+++ b/app/pages/resource/_resource.vue
@@ -40,11 +40,9 @@
           <!-- FEATURE: end - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
           <div class="grow-[2]">
-            <h1 class="text-3xl sm:text-5xl font-bold my-10 sm:my-10">
-              {{ resource.title }}
-            </h1>
+            <r-h1 :heading-text="resource.title" class="my-10"></r-h1>
 
-            <div v-html="richText"></div>
+            <div v-if="richText != null" v-html="richText"></div>
 
             <!-- Related Resources - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
 
@@ -74,11 +72,19 @@
 
 <script>
 import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
-import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types'
 import { resourcePageQuery } from '@/utils/queries'
 import { getHeadElement } from '@/utils/headElementAssembler'
+import { richTextRenderOptions } from '@/utils/richTextRenderOptions'
+import RH1 from '@/components/r-html-tags/rH1'
+
+let headings = []
+
+export const addHeading = (heading) => {
+  headings.push(heading)
+}
 
 export default {
+  components: { RH1 },
   layout: 'expandedSearch',
 
   async asyncData({ params, $contentfulApi, store, payload }) {
@@ -102,7 +108,6 @@ export default {
           return result.data
         })
     }
-    // console.log('_resource.vue', resource)
 
     let breadcrumbs = resource.breadcrumbsCollection.items
 
@@ -117,18 +122,21 @@ export default {
       path: topicPathPrefix + breadcrumb.urlSlug,
     }))
     breadcrumbs.locale = currentLocale.substring(0, 2)
-    console.log('breadcrumbs locale: ' + breadcrumbs.locale)
 
     let relatedResources = resource.relatedResourcesCollection.items
 
     const localeCode = currentLocale.substring(0, 2)
 
-    relatedResources = relatedResources.map((resource) => ({
-      title: resource.title,
-      dateAdded: resource.dateAdded,
-      path: resourcePathPrefix + resource.urlSlug,
-      locale: localeCode,
-    }))
+    if (relatedResources) {
+      relatedResources = relatedResources
+        .filter((resource) => resource?.title != null)
+        .map((resource) => ({
+          title: resource.title,
+          dateAdded: resource?.dateAdded,
+          path: resourcePathPrefix + resource?.urlSlug,
+          locale: localeCode,
+        }))
+    }
 
     const headElement = getHeadElement(resource.title, localeCode)
 
@@ -150,64 +158,16 @@ export default {
       fr: { resource: frRouteParam },
     })
 
-    const headings = []
-
-    const resourceRichTextRenderOptionsx = {
-      renderMark: {
-        [MARKS.BOLD]: (text) => {
-          console.log(text)
-          return `<strong class="font-bold">${text}</strong>`
-        },
-        [MARKS.ITALIC]: (text) => {
-          return `<i class="italic">${text}</i>`
-        },
-      },
-      renderNode: {
-        [INLINES.HYPERLINK]: (node) => {
-          return `<a class="text-blue-900 underline" href="${node.data.uri}">${node.content[0].value}</a>`
-        },
-        [BLOCKS.HEADING_1]: (node) => {
-          return `<h1 class="text-3xl font-medium mt-12 mb-2.5" >${node.content[0].value}</h1>`
-        },
-        [BLOCKS.HEADING_2]: (node) => {
-          const heading = node.content[0].value
-          const headingId = heading.replace(/\s+/g, '-').toLowerCase()
-          headings.push({ linkName: heading, linkId: headingId })
-          return `<h2 id="${headingId}" class="text-2xl font-medium mt-12 mb-2.5 scroll-mt-40">${node.content[0].value}</h2>`
-        },
-        [BLOCKS.HEADING_3]: (node) => {
-          return `<h3 class="text-xl font-medium mt-12 mb-2.5">${node.content[0].value}</h3>`
-        },
-        [BLOCKS.HEADING_4]: (node) => {
-          return `<h4 class="text-lg font-medium mt-12 mb-2.5">${node.content[0].value}</h4>`
-        },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        [BLOCKS.PARAGRAPH]: (node, next) => {
-          // return `<p class="leading-7">${node.content[0].value}</p>`
-          return `<p class="leading-relaxed text-xl tracking-wide text-gray-800">${next(
-            node.content
-          ).replace(/\n/g, '<br/>')}</p>`
-        },
-        [BLOCKS.UL_LIST]: (node, next) => {
-          return `<ul class="list-disc ml-4">
-                        ${next(node.content)}
-                    </ul>`
-        },
-        [BLOCKS.OL_LIST]: (node, next) => {
-          return `<ol class="list-decimal ml-4">
-                    ${next(node.content)}
-                    </ol>`
-        },
-        [BLOCKS.HR]: () => {
-          return `<div class="border-t border-gray-300 mt-10"></div>`
-        },
-      },
-    }
+    headings = []
+
+    let richText = null
 
-    const richText = documentToHtmlString(
-      resource.body.json,
-      resourceRichTextRenderOptionsx
-    )
+    if (resource.body) {
+      richText = documentToHtmlString(
+        resource.body.json,
+        richTextRenderOptions(currentLocale, resource.body.links, addHeading)
+      )
+    }
 
     return {
       resource,
diff --git a/app/pages/topic/_topic.vue b/app/pages/topic/_topic.vue
index 74732f7d..d4beb2e3 100644
--- a/app/pages/topic/_topic.vue
+++ b/app/pages/topic/_topic.vue
@@ -8,13 +8,10 @@
 
     <div class="flex my-24 sm:my-28">
       <div class="md:w-2/3">
-        <h1 class="font-bold text-4xl sm:text-5xl">{{ topic.name }}</h1>
-        <p
-          v-if="topic.topicDescription"
-          class="pt-10 text-lg sm:text-xl text-gray-900 tracking-wide leading-relaxed"
-        >
+        <r-h1 :heading-text="topic.name"></r-h1>
+        <r-p v-if="topic.topicDescription">
           {{ topic.topicDescription }}
-        </p>
+        </r-p>
       </div>
     </div>
 
@@ -81,9 +78,15 @@ import { topicPageQuery } from '@/utils/queries'
 import { getHeadElement } from '@/utils/headElementAssembler'
 import { getCollectionPath } from '@/utils/pathUtility'
 import CollectionListItem from '@/components/list-items/CollectionListItem'
+import RP from '@/components/r-html-tags/rP'
+import RH1 from '@/components/r-html-tags/rH1'
 
 export default {
-  components: { CollectionListItem },
+  components: {
+    RH1,
+    RP,
+    CollectionListItem,
+  },
   // Filters ----------------------------------------------------------------------------------------------------------
 
   filters: {
@@ -101,12 +104,9 @@ export default {
   async asyncData({ params, $contentfulApi, store, payload }) {
     const currentLocale = payload && payload.locale ? payload.locale : 'en-CA'
 
-    // const currentLocale = currentLocale.includes('en') ? 'fr-CA' : 'en-CA'
     const alternateLocale = currentLocale.includes('en') ? 'fr-CA' : 'en-CA'
     const isDefaultLocale = currentLocale.includes('en') || false
 
-    // const topic = params.topic[0].toUpperCase() + params.topic.substring(1);
-
     const urlSlug = params.topic
 
     const pageQuery = topicPageQuery(urlSlug, currentLocale, alternateLocale)
@@ -167,12 +167,16 @@ export default {
 
     const localeCode = currentLocale.substring(0, 2)
 
-    resources = resources.map((resource) => ({
-      title: resource.title,
-      dateAdded: resource.dateAdded,
-      path: resourcePathPrefix + resource.urlSlug,
-      locale: localeCode,
-    }))
+    if (resources) {
+      resources = resources
+        .filter((resource) => resource.title != null)
+        .map((resource) => ({
+          title: resource?.title,
+          dateAdded: resource?.dateAdded,
+          path: resourcePathPrefix + resource?.urlSlug,
+          locale: localeCode,
+        }))
+    }
 
     let collections = topic.collectionsCollection.items
     collections = collections.map((collection) => ({
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index ec3951ae..040f9221 100644
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -1,4 +1,6 @@
 module.exports = {
+  content: ['./utils/richTextRenderOptions.js'],
+
   variants: {
     backgroundColor: ['hover', 'active'],
     textColor: ['hover', 'active'],
diff --git a/app/utils/contentTypes.js b/app/utils/contentTypes.js
new file mode 100644
index 00000000..0ce49ea6
--- /dev/null
+++ b/app/utils/contentTypes.js
@@ -0,0 +1,8 @@
+export const ContentTypes = {
+  ABOUT_PAGE: 'AboutPage',
+  COLLECTION: 'Collection',
+  CONTACT_PAGE: 'ContactPage',
+  LEGAL_PAGE: 'LegalPage',
+  RESOURCE: 'TestResource',
+  TOPIC: 'Topic',
+}
diff --git a/app/utils/generateRoutes.js b/app/utils/generateRoutes.js
index 078c0683..e2252dd7 100644
--- a/app/utils/generateRoutes.js
+++ b/app/utils/generateRoutes.js
@@ -255,7 +255,6 @@ module.exports = async (contentfulAccessToken, contentfulSpaceId) => {
     const homeItem = await axios
       .post(apiURL, { query: pageQuery }, axiosConfig)
       .then((res) => {
-        console.log(res.data)
         return res.data.data.topicCollection.items
       })
     homeRoutesWithPayload.push({
@@ -288,7 +287,6 @@ module.exports = async (contentfulAccessToken, contentfulSpaceId) => {
     const aboutPage = await axios
       .post(apiURL, { query: pageQuery }, axiosConfig)
       .then((res) => {
-        console.log(res.data)
         return res.data.data.aboutPageCollection.items[0]
       })
     homeRoutesWithPayload.push({
@@ -321,7 +319,6 @@ module.exports = async (contentfulAccessToken, contentfulSpaceId) => {
     const contactPage = await axios
       .post(apiURL, { query: pageQuery }, axiosConfig)
       .then((res) => {
-        console.log(res.data)
         return res.data.data.contactPageCollection.items[0]
       })
     homeRoutesWithPayload.push({
@@ -333,15 +330,6 @@ module.exports = async (contentfulAccessToken, contentfulSpaceId) => {
     })
   }
 
-  // ------------------------------------------------------------------------------------------------------------------
-
-  // console.log('------ generated routes ----------')
-  // console.log(
-  //   topicRoutesWithPayload,
-  //   resourceRoutesWithPayload,
-  //   legalRoutesWithPayload
-  // )
-
   return topicRoutesWithPayload
     .concat(homeRoutesWithPayload)
     .concat(resourceRoutesWithPayload)
diff --git a/app/utils/pathUtility.js b/app/utils/pathUtility.js
index 6bfb7cfc..7b4121b6 100644
--- a/app/utils/pathUtility.js
+++ b/app/utils/pathUtility.js
@@ -3,6 +3,8 @@ const topicPrefixFR = '/sujet/'
 const resourcePrefixEN = '/resource/'
 const resourcePrefixFR = '/ressource/'
 const collectionPrefix = '/collection/'
+const legalPrefixEN = '/legal/'
+const legalPrefixFR = '/transparence/'
 
 export const getTopicPathPrefix = (currentLocale) => {
   return currentLocale.includes('en') ? topicPrefixEN : topicPrefixFR
@@ -12,6 +14,10 @@ export const getResourcePathPrefix = (currentLocale) => {
   return currentLocale.includes('en') ? resourcePrefixEN : resourcePrefixFR
 }
 
+export const getLegalPathPrefix = (currentLocale) => {
+  return currentLocale.includes('en') ? legalPrefixEN : legalPrefixFR
+}
+
 export const getCollectionPathPrefix = () => {
   return collectionPrefix
 }
diff --git a/app/utils/queries.js b/app/utils/queries.js
index 965bbd5e..34c68ca6 100644
--- a/app/utils/queries.js
+++ b/app/utils/queries.js
@@ -1,3 +1,5 @@
+import { ContentTypes } from './contentTypes'
+
 export const topicPageQuery = (
   urlSlug,
   currentLocale,
@@ -138,6 +140,45 @@ export const resourcePageQuery = (
           body
           {
             json
+            links
+            {
+              entries
+              {
+                hyperlink
+                {
+                  __typename ... on ${ContentTypes.RESOURCE}
+                  {
+                    sys
+                    {
+                      id
+                    }
+                    urlSlug
+                  }
+                }
+                hyperlink
+                {
+                  __typename ... on ${ContentTypes.TOPIC}
+                  {
+                    sys
+                    {
+                      id
+                    }
+                    urlSlug
+                  }
+                }
+                hyperlink
+                {
+                  __typename ... on ${ContentTypes.COLLECTION}
+                  {
+                    sys
+                    {
+                      id
+                    }
+                    urlSlug
+                  }
+                }
+              }
+            }
           }
         }
       }
@@ -158,6 +199,23 @@ export const legalPageQuery = (
           body
           {
             json
+            links
+            {
+              entries
+              {
+                hyperlink
+                {
+                  __typename ... on ${ContentTypes.LEGAL_PAGE}
+                  {
+                    sys
+                    {
+                      id
+                    }
+                    urlSlug
+                  }
+                }
+              }
+            }
           }
         }
       }
diff --git a/app/utils/richTextRenderOptions.js b/app/utils/richTextRenderOptions.js
index 8dad99f0..31e0a20e 100644
--- a/app/utils/richTextRenderOptions.js
+++ b/app/utils/richTextRenderOptions.js
@@ -1,114 +1,110 @@
 import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types'
-import { legalEntryQuery } from '~/utils/queries'
+import { ContentTypes } from '~/utils/contentTypes'
+import {
+  getCollectionPath,
+  getLegalPathPrefix,
+  getResourcePathPrefix,
+  getTopicPathPrefix,
+} from '~/utils/pathUtility'
 
-export const richTextRenderOptions = {
-  renderMark: {
-    [MARKS.BOLD]: (text) => {
-      console.log(text)
-      return `<strong class="font-bold">${text}</strong>`
-    },
-    [MARKS.ITALIC]: (text) => {
-      return `<i class="italic">${text}</i>`
-    },
-  },
-  renderNode: {
-    [INLINES.HYPERLINK]: (node) => {
-      console.log('----- _legal: ' + node.content)
-      return `<a class="text-blue-900 underline" href="${node.data.uri}">${node.content[0].value}</a>`
-    },
-    [INLINES.ENTRY_HYPERLINK]: (node) => {
-      console.log(node.data.target.sys.id)
-
-      const entryId = node.data.target.sys.id
+export const richTextRenderOptions = (
+  currentLocale,
+  links,
+  addToResourceHeadings
+) => {
+  const entryLinks = new Map()
 
-      const pageQuery = legalEntryQuery(entryId)
+  if (links) {
+    for (const entryHyperlink of links.entries.hyperlink) {
+      entryLinks.set(entryHyperlink.sys.id, entryHyperlink)
+    }
+  }
 
-      const entry = $contentfulApi
-        .$post('', { query: pageQuery })
-        .then((res) => {
-          // console.log(res)
-          return res.data.legalPage
-        })
+  return {
+    renderMark: {
+      [MARKS.BOLD]: (text) => {
+        return `<strong class="font-bold">${text}</strong>`
+      },
+      [MARKS.ITALIC]: (text) => {
+        return `<i class="italic">${text}</i>`
+      },
+    },
+    renderNode: {
+      [INLINES.HYPERLINK]: (node) => {
+        return `<a class="text-blue-900 underline" href="${node.data.uri}">${node.content[0].value}</a>`
+      },
+      [INLINES.ENTRY_HYPERLINK]: (node) => {
+        const entry = entryLinks.get(node.data.target.sys.id)
 
-      const path = '/legal/' + entry.urlSlug
-      console.log(path)
-      return `<nuxt-link class="text-blue-900 underline" :to="localePath(${path})">${node.content[0].value}</nuxt-link>`
-    },
-    [BLOCKS.HEADING_1]: (node) => {
-      return `<h1 class="text-3xl font-medium mt-12 mb-2.5" >${node.content[0].value}</h1>`
-    },
-    [BLOCKS.HEADING_2]: (node) => {
-      return `<h2 class="text-2xl font-medium mt-12 mb-2.5">${node.content[0].value}</h2>`
-    },
-    [BLOCKS.HEADING_3]: (node) => {
-      return `<h3 class="text-xl font-medium mt-12 mb-2.5">${node.content[0].value}</h3>`
-    },
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    [BLOCKS.PARAGRAPH]: (node, next) => {
-      // return `<p class="leading-7">${node.content[0].value}</p>`
-      return `<p class="leading-relaxed text-xl tracking-wide text-gray-800">${next(
-        node.content
-      )}</p>`
-    },
-    [BLOCKS.UL_LIST]: (node, next) => {
-      // console.log(JSON.parse(JSON.stringify(node)))
-      return `<ul class="list-disc ml-4">
+        if (entry.__typename === ContentTypes.RESOURCE) {
+          const resourcePath =
+            getResourcePathPrefix(currentLocale) + entry.urlSlug
+          return `<a class="text-blue-900 underline" href="${resourcePath}">${node.content[0].value}</a>`
+        }
+        if (entry.__typename === ContentTypes.TOPIC) {
+          const topicPath = getTopicPathPrefix(currentLocale) + entry.urlSlug
+          return `<a class="text-blue-900 underline" href="${topicPath}">${node.content[0].value}</a>`
+        }
+        if (entry.__typename === ContentTypes.COLLECTION) {
+          const collectionPath = getCollectionPath(entry.urlSlug)
+          return `<a class="text-blue-900 underline" href="${collectionPath}">${node.content[0].value}</a>`
+        }
+        if (entry.__typename === ContentTypes.LEGAL_PAGE) {
+          const legalPath = getLegalPathPrefix(currentLocale) + entry.urlSlug
+          return `<a class="text-blue-900 underline" href="${legalPath}">${node.content[0].value}</a>`
+        }
+      },
+      [BLOCKS.HEADING_1]: (node) => {
+        return `<h1 class="text-4xl font-medium mt-12 mb-2.5" >${node.content[0].value}</h1>`
+      },
+      [BLOCKS.HEADING_2]: (node) => {
+        const heading = node.content[0].value
+        const headingId = heading.replace(/\s+/g, '-').toLowerCase()
+        if (
+          addToResourceHeadings &&
+          typeof addToResourceHeadings === 'function'
+        ) {
+          addToResourceHeadings({ linkName: heading, linkId: headingId })
+        }
+        return `<h2 id="${headingId}" class="text-3xl font-medium mt-12 mb-2.5 scroll-mt-40">${node.content[0].value}</h2>`
+      },
+      [BLOCKS.HEADING_3]: (node) => {
+        return `<h3 class="text-2xl font-medium mt-12 mb-2.5">${node.content[0].value}</h3>`
+      },
+      [BLOCKS.HEADING_4]: (node) => {
+        return `<h4 class="text-xl font-medium mt-12 mb-2.5">${node.content[0].value}</h4>`
+      },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      [BLOCKS.PARAGRAPH]: (node, next) => {
+        // return `<p class="leading-7">${node.content[0].value}</p>`
+        return `<p class="leading-relaxed text-lg tracking-wide text-gray-800 mt-5">${next(
+          node.content
+        ).replace(/\n/g, '<br/>')}</p>`
+      },
+      [BLOCKS.UL_LIST]: (node, next) => {
+        return `<ul class="list-disc ml-4">
                         ${next(node.content)}
                     </ul>`
-    },
-    [BLOCKS.HR]: () => {
-      return `<div class="border-t border-gray-300 mt-10"></div>`
-    },
-  },
-}
-
-// Resource Render Options --------------------------------------------------------------------------------------------
-
-export const resourceRichTextRenderOptions = {
-  renderMark: {
-    [MARKS.BOLD]: (text) => {
-      console.log(text)
-      return `<strong class="font-bold">${text}</strong>`
-    },
-    [MARKS.ITALIC]: (text) => {
-      return `<i class="italic">${text}</i>`
-    },
-  },
-  renderNode: {
-    [INLINES.HYPERLINK]: (node) => {
-      return `<a class="text-blue-900 underline" href="${node.data.uri}">${node.content[0].value}</a>`
-    },
-    [BLOCKS.HEADING_1]: (node) => {
-      return `<h1 class="text-3xl font-medium mt-12 mb-2.5" >${node.content[0].value}</h1>`
-    },
-    [BLOCKS.HEADING_2]: (node) => {
-      return `<h2 class="text-2xl font-medium mt-12 mb-2.5">${node.content[0].value}</h2>`
-    },
-    [BLOCKS.HEADING_3]: (node) => {
-      return `<h3 class="text-xl font-medium mt-12 mb-2.5">${node.content[0].value}</h3>`
-    },
-    [BLOCKS.HEADING_4]: (node) => {
-      return `<h4 class="text-lg font-medium mt-12 mb-2.5">${node.content[0].value}</h4>`
-    },
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    [BLOCKS.PARAGRAPH]: (node, next) => {
-      // return `<p class="leading-7">${node.content[0].value}</p>`
-      return `<p class="leading-relaxed text-xl tracking-wide text-gray-800">${next(
-        node.content
-      ).replace(/\n/g, '<br/>')}</p>`
-    },
-    [BLOCKS.UL_LIST]: (node, next) => {
-      return `<ul class="list-disc ml-4">
-                        ${next(node.content)}
-                    </ul>`
-    },
-    [BLOCKS.OL_LIST]: (node, next) => {
-      return `<ol class="list-decimal ml-4">
+      },
+      [BLOCKS.OL_LIST]: (node, next) => {
+        return `<ol class="list-decimal ml-4">
                     ${next(node.content)}
                     </ol>`
+      },
+      /* [BLOCKS.LIST_ITEM]: (node) => {
+        node.content = node.content
+          .map((listItemNode) =>
+            listItemNode.nodeType === BLOCKS.PARAGRAPH
+              ? listItemNode.content
+              : listItemNode
+          )
+          .flat()
+
+        return `<li class="text-lg leading-relaxed tracking-wide text-gray-800 mt-3">${node.content[0].value}</li>`
+      }, */
+      [BLOCKS.HR]: () => {
+        return `<div class="border-t border-gray-300 mt-10"></div>`
+      },
     },
-    [BLOCKS.HR]: () => {
-      return `<div class="border-t border-gray-300 mt-10"></div>`
-    },
-  },
+  }
 }
diff --git a/customHttp.yml b/customHttp.yml
index 77404fe3..f1bdb4cb 100644
--- a/customHttp.yml
+++ b/customHttp.yml
@@ -10,4 +10,4 @@ customHeaders:
       - key: 'X-Content-Type-Options'
         value: 'nosniff'
       - key: 'Content-Security-Policy'
-        value: "report-uri https://csp-report-to.security.cdssandbox.xyz/report; default-src 'self'; script-src 'self' www.googletagmanager.com www.google-analytics.com; frame-src www.googletagmanager.com www.google-analytics.com; connect-src 'self' www.googletagmanager.com www.google-analytics.com; img-src 'self'; style-src 'unsafe-inline' https: 'strict-dynamic' 'self'; base-uri 'self'; form-action 'self'"
+        value: "report-uri https://csp-report-to.security.cdssandbox.xyz/report; default-src 'self'; script-src 'self' www.googletagmanager.com www.google-analytics.com; frame-src www.googletagmanager.com www.google-analytics.com; connect-src 'self' www.googletagmanager.com www.google-analytics.com; img-src 'self'; style-src 'unsafe-inline' https: 'strict-dynamic' 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; base-uri 'self'; form-action 'self'"