diff --git a/package-lock.json b/package-lock.json
index 607b11c3e5c33b34a4066db3d5c2b392328ef641..995e71cce3026856c711ffea35078e562f3bacd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@antv/g6": "^4.8.24",
+        "@apollo/sandbox": "^2.6.0",
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
@@ -36,12 +37,14 @@
         "@graphql-codegen/client-preset": "^4.1.0",
         "@graphql-eslint/eslint-plugin": "^3.20.1",
         "@iconify-json/carbon": "^1.1.18",
+        "@iconify-json/devicon": "^1.1.43",
         "@iconify-json/emojione": "^1.1.10",
         "@iconify-json/fa": "^1.1.4",
         "@iconify-json/fa-regular": "^1.1.5",
         "@iconify-json/fa6-regular": "^1.1.13",
         "@iconify-json/fa6-solid": "^1.1.13",
         "@iconify-json/fluent": "^1.1.35",
+        "@iconify-json/logos": "^1.1.40",
         "@iconify-json/tabler": "^1.1.87",
         "@parcel/watcher": "^2.4.0",
         "@rushstack/eslint-patch": "^1.2.0",
@@ -515,6 +518,37 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/@apollo/sandbox": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@apollo/sandbox/-/sandbox-2.6.0.tgz",
+      "integrity": "sha512-VPaVWt75Pi/G5W/QjxXB5PzgV/k7XTRIo/sb5aaEzTZQAekHzI2nbqh0bCe6YqTqof0SnOj+I1QD+g7ruL+/WQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/whatwg-mimetype": "^3.0.0",
+        "eventemitter3": "3.1.0",
+        "graphql-ws": "^5.9.0",
+        "subscriptions-transport-ws": "^0.11.0",
+        "whatwg-mimetype": "^3.0.0",
+        "zen-observable-ts": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@apollo/sandbox/node_modules/eventemitter3": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
+      "integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA=="
+    },
     "node_modules/@ardatan/relay-compiler": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/@ardatan/relay-compiler/-/relay-compiler-12.0.0.tgz",
@@ -4291,6 +4325,16 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/devicon": {
+      "version": "1.1.43",
+      "resolved": "https://registry.npmjs.org/@iconify-json/devicon/-/devicon-1.1.43.tgz",
+      "integrity": "sha512-YOz/uZfh+mIzXTQI4Kh6IKHs5h8QJN9lCDXDejof6r8F3ICAVivJcrDSnR/9pMuecvGsxdB41wipvpC0roCPcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/emojione": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/@iconify-json/emojione/-/emojione-1.1.10.tgz",
@@ -4345,6 +4389,16 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/logos": {
+      "version": "1.1.40",
+      "resolved": "https://registry.npmjs.org/@iconify-json/logos/-/logos-1.1.40.tgz",
+      "integrity": "sha512-F8XapUfZHp9Q53aFvhwFrwmM1NIXOtDV9G0WxIONSu3diiieObmiJQy5oNxla4LgPccyYYHyJQCo0Diys3sIUA==",
+      "dev": true,
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/tabler": {
       "version": "1.1.87",
       "resolved": "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.1.87.tgz",
@@ -5052,6 +5106,11 @@
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
       "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
+    "node_modules/@types/whatwg-mimetype": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
+      "integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.10",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@@ -5071,6 +5130,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/zen-observable": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.3.tgz",
+      "integrity": "sha512-fbF6oTd4sGGy0xjHPKAt+eS2CrxJ3+6gQ3FGcBoIJR2TLAyCkCyI8JqZNy+FeON0AhVgNJoUumVoZQjBFUqHkw=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.62.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
@@ -6205,6 +6269,11 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6480,9 +6549,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001579",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz",
-      "integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==",
+      "version": "1.0.30001649",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001649.tgz",
+      "integrity": "sha512-fJegqZZ0ZX8HOWr6rcafGr72+xcgJKI9oWfDW5DrD7ExUtgZC7a7R7ZYmZqplh7XDocFdGeIFn7roAxhOeYrPQ==",
       "dev": true,
       "funding": [
         {
@@ -6497,7 +6566,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/capital-case": {
       "version": "1.0.4",
@@ -8858,7 +8928,6 @@
       "version": "5.12.1",
       "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-5.12.1.tgz",
       "integrity": "sha512-umt4f5NnMK46ChM2coO36PTFhHouBrK9stWWBczERguwYrGnPNxJ9dimU6IyOBfOkC6Izhkg4H8+F51W/8CYDg==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -9740,6 +9809,11 @@
       "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
       "dev": true
     },
+    "node_modules/iterall": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.3.0.tgz",
+      "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
+    },
     "node_modules/jiti": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
@@ -12845,6 +12919,47 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/subscriptions-transport-ws": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.11.0.tgz",
+      "integrity": "sha512-8D4C6DIH5tGiAIpp5I0wD/xRlNiZAPGHygzCe7VzyzUoxHtawzjNAY9SUTXU05/EY2NMY9/9GF0ycizkXr1CWQ==",
+      "deprecated": "The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md",
+      "dependencies": {
+        "backo2": "^1.0.2",
+        "eventemitter3": "^3.1.0",
+        "iterall": "^1.2.1",
+        "symbol-observable": "^1.0.4",
+        "ws": "^5.2.0 || ^6.0.0 || ^7.0.0"
+      },
+      "peerDependencies": {
+        "graphql": "^15.7.2 || ^16.0.0"
+      }
+    },
+    "node_modules/subscriptions-transport-ws/node_modules/eventemitter3": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
+      "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
+    },
+    "node_modules/subscriptions-transport-ws/node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
@@ -12932,6 +13047,14 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -13964,7 +14087,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
       "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -14196,6 +14318,20 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zen-observable": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "node_modules/zen-observable-ts": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.1.0.tgz",
+      "integrity": "sha512-1h4zlLSqI2cRLPJUHJFL8bCWHhkpuXkF+dbGkRaWjgDIG26DmzyshUMrdV/rL3UnR+mhaX4fRq8LPouq0MYYIA==",
+      "dependencies": {
+        "@types/zen-observable": "0.8.3",
+        "zen-observable": "0.8.15"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 26caf1c53500b711f9de831ef9a411ca7da2069a..d3598e023eca0bd07239f486767f794d0fc47dc3 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@antv/g6": "^4.8.24",
+    "@apollo/sandbox": "^2.6.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
@@ -49,12 +50,14 @@
     "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-eslint/eslint-plugin": "^3.20.1",
     "@iconify-json/carbon": "^1.1.18",
+    "@iconify-json/devicon": "^1.1.43",
     "@iconify-json/emojione": "^1.1.10",
     "@iconify-json/fa": "^1.1.4",
     "@iconify-json/fa-regular": "^1.1.5",
     "@iconify-json/fa6-regular": "^1.1.13",
     "@iconify-json/fa6-solid": "^1.1.13",
     "@iconify-json/fluent": "^1.1.35",
+    "@iconify-json/logos": "^1.1.40",
     "@iconify-json/tabler": "^1.1.87",
     "@parcel/watcher": "^2.4.0",
     "@rushstack/eslint-patch": "^1.2.0",
diff --git a/src/components/BaseRenderedMarkdown.vue b/src/components/BaseRenderedMarkdown.vue
index 2961e812dd0f48beef62f3ac186e624835720ef4..2dd596f927fa25e97dfef6bdc0e76672a0602c42 100644
--- a/src/components/BaseRenderedMarkdown.vue
+++ b/src/components/BaseRenderedMarkdown.vue
@@ -46,7 +46,39 @@ const sanitizedHTML = computed(() => DOMPurify.sanitize(renderedHTML.value))
 </template>
 
 <style scoped>
-#rendered-markdown :deep(*) {
-  display: v-bind('inlineContent ? "inline" : "inherit"');
+#rendered-markdown :deep(address),
+:deep(article),
+:deep(aside),
+:deep(blockquote),
+:deep(details),
+:deep(dialog),
+:deep(dd),
+:deep(div),
+:deep(dl),
+:deep(dt),
+:deep(fieldset),
+:deep(figcaption),
+:deep(figure),
+:deep(footer),
+:deep(form),
+:deep(h1),
+:deep(h2),
+:deep(h3),
+:deep(h4),
+:deep(h5),
+:deep(h6),
+:deep(header),
+:deep(hgroup),
+:deep(hr),
+:deep(li),
+:deep(main),
+:deep(nav),
+:deep(ol),
+:deep(p),
+:deep(pre),
+:deep(section),
+:deep(table),
+:deep(ul) {
+  display: v-bind('props.inlineContent ? "inline" : "block"');
 }
 </style>
diff --git a/src/gql/codegen/gql.ts b/src/gql/codegen/gql.ts
index d4c891c9799f0387f2f600e700f2dea445776a32..3f48bb30fce33871e14101bc0288c165848a0d6c 100644
--- a/src/gql/codegen/gql.ts
+++ b/src/gql/codegen/gql.ts
@@ -23,6 +23,8 @@ const documents = {
     "\n  query targetByIdQuery($id: ID) {\n    targets(where: { id: $id }) {\n      id\n      name\n      altnames\n      description\n      length\n      class\n      unit\n      chromosomeConnection: parentConnection(\n        where: { node: { graphql_type: Chromosome } }\n      ) {\n        edges {\n          properties {\n            start\n            end\n            strand\n          }\n          node {\n            name\n            graphql_type\n          }\n        }\n      }\n      seq\n      genome {\n        organism {\n          id\n          label\n        }\n      }\n      modifications {\n        id\n        name\n        position\n        type\n      }\n      modificationsAggregate {\n        count\n      }\n      interactions {\n        duplexes {\n          primaryStrandsConnection: strandsConnection(\n            where: { edge: { primary: true } }\n          ) {\n            edges {\n              properties {\n                start\n                end\n                primary\n              }\n              node {\n                seq\n                parentConnection {\n                  edges {\n                    properties {\n                      start\n                      end\n                    }\n                  }\n                }\n              }\n            }\n          }\n          secondaryStrandsConnection: strandsConnection(\n            where: { edge: { primary: false } }\n          ) {\n            edges {\n              properties {\n                start\n                end\n                primary\n              }\n              node {\n                seq\n                parentConnection {\n                  edges {\n                    properties {\n                      start\n                      end\n                    }\n                  }\n                }\n              }\n            }\n          }\n          index\n        }\n        modification {\n          id\n          name\n          position\n          symbol\n          symbol_label\n          type\n          type_short_label\n        }\n        guide {\n          id\n          name\n          subclass_label\n          class\n        }\n      }\n      chebi_id\n      so_id\n      url\n      secondary_struct_file\n    }\n\n    guides(where: { modifications_SOME: { target: { id: $id } } }) {\n      id\n      name\n      class\n    }\n  }\n": types.TargetByIdQueryDocument,
     "\n  query clusterByIdQuery($id: ID) {\n    clusters(where: { id: $id }) {\n      id\n      guides {\n        id\n        name\n        class\n        subclass_label\n        modificationsAggregate {\n          count\n        }\n        chromosomeConnection: parentConnection(\n          where: { node: { graphql_type: Chromosome } }\n        ) {\n          edges {\n            properties {\n              start\n              end\n            }\n          }\n        }\n      }\n      guidesAggregate {\n        count\n      }\n      referenceGuide: guides(options: { limit: 1 }) {\n        chromosome: parent(where: { graphql_type: Chromosome }) {\n          id\n          name\n        }\n        genome {\n          organism {\n            label\n            id\n          }\n        }\n      }\n    }\n  }\n": types.ClusterByIdQueryDocument,
     "\n  query databaseStatisticsQuery {\n    organismsAggregate {\n      count\n    }\n\n    allModifications: modifications {\n      type\n    }\n\n    allModificationsCount: modificationsAggregate {\n      count\n    }\n\n    nonOrphanModificationsCount: modificationsAggregate(\n      where: { guidesAggregate: { count_GT: 0 } }\n    ) {\n      count\n    }\n\n    allGuides: guides {\n      subclass\n    }\n\n    allGuidesCount: guidesAggregate {\n      count\n    }\n\n    nonOrphanGuidesCount: guidesAggregate(\n      where: { modificationsAggregate: { count_GT: 0 } }\n    ) {\n      count\n    }\n  }\n": types.DatabaseStatisticsQueryDocument,
+    "\n  query legalDocumentListQuery {\n    documents {\n      legals {\n        id\n        menu_label\n      }\n    }\n  }\n": types.LegalDocumentListQueryDocument,
+    "\n  query legalDocumentByIdQuery($id: ID) {\n    mdPages(where: { id: $id }) {\n      id\n      menu_label\n      content\n    }\n  }\n": types.LegalDocumentByIdQueryDocument,
 };
 
 /**
@@ -79,6 +81,14 @@ export function graphql(source: "\n  query clusterByIdQuery($id: ID) {\n    clus
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  query databaseStatisticsQuery {\n    organismsAggregate {\n      count\n    }\n\n    allModifications: modifications {\n      type\n    }\n\n    allModificationsCount: modificationsAggregate {\n      count\n    }\n\n    nonOrphanModificationsCount: modificationsAggregate(\n      where: { guidesAggregate: { count_GT: 0 } }\n    ) {\n      count\n    }\n\n    allGuides: guides {\n      subclass\n    }\n\n    allGuidesCount: guidesAggregate {\n      count\n    }\n\n    nonOrphanGuidesCount: guidesAggregate(\n      where: { modificationsAggregate: { count_GT: 0 } }\n    ) {\n      count\n    }\n  }\n"): (typeof documents)["\n  query databaseStatisticsQuery {\n    organismsAggregate {\n      count\n    }\n\n    allModifications: modifications {\n      type\n    }\n\n    allModificationsCount: modificationsAggregate {\n      count\n    }\n\n    nonOrphanModificationsCount: modificationsAggregate(\n      where: { guidesAggregate: { count_GT: 0 } }\n    ) {\n      count\n    }\n\n    allGuides: guides {\n      subclass\n    }\n\n    allGuidesCount: guidesAggregate {\n      count\n    }\n\n    nonOrphanGuidesCount: guidesAggregate(\n      where: { modificationsAggregate: { count_GT: 0 } }\n    ) {\n      count\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query legalDocumentListQuery {\n    documents {\n      legals {\n        id\n        menu_label\n      }\n    }\n  }\n"): (typeof documents)["\n  query legalDocumentListQuery {\n    documents {\n      legals {\n        id\n        menu_label\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query legalDocumentByIdQuery($id: ID) {\n    mdPages(where: { id: $id }) {\n      id\n      menu_label\n      content\n    }\n  }\n"): (typeof documents)["\n  query legalDocumentByIdQuery($id: ID) {\n    mdPages(where: { id: $id }) {\n      id\n      menu_label\n      content\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
diff --git a/src/gql/codegen/graphql.ts b/src/gql/codegen/graphql.ts
index e1b6b3c82f63a05781e6fb2ebaf050bd80a1b981..5c3bc84d43e6b13dbfe0d78700e513a0541316ad 100644
--- a/src/gql/codegen/graphql.ts
+++ b/src/gql/codegen/graphql.ts
@@ -838,7 +838,7 @@ export type ClustersConnection = {
 export type Documents = {
   __typename?: 'Documents';
   /** The list of legal pages */
-  legal?: Maybe<Array<MdPage>>;
+  legals?: Maybe<Array<MdPage>>;
 };
 
 export type DocumentsAggregateSelection = {
@@ -8924,6 +8924,18 @@ export type DatabaseStatisticsQueryQueryVariables = Exact<{ [key: string]: never
 
 export type DatabaseStatisticsQueryQuery = { __typename?: 'Query', organismsAggregate: { __typename?: 'OrganismAggregateSelection', count: number }, allModifications: Array<{ __typename?: 'Modification', type?: ModifType | null }>, allModificationsCount: { __typename?: 'ModificationAggregateSelection', count: number }, nonOrphanModificationsCount: { __typename?: 'ModificationAggregateSelection', count: number }, allGuides: Array<{ __typename?: 'Guide', subclass: GuideClass }>, allGuidesCount: { __typename?: 'GuideAggregateSelection', count: number }, nonOrphanGuidesCount: { __typename?: 'GuideAggregateSelection', count: number } };
 
+export type LegalDocumentListQueryQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type LegalDocumentListQueryQuery = { __typename?: 'Query', documents: Array<{ __typename?: 'Documents', legals?: Array<{ __typename?: 'MDPage', id: string, menu_label: string }> | null }> };
+
+export type LegalDocumentByIdQueryQueryVariables = Exact<{
+  id?: InputMaybe<Scalars['ID']['input']>;
+}>;
+
+
+export type LegalDocumentByIdQueryQuery = { __typename?: 'Query', mdPages: Array<{ __typename?: 'MDPage', id: string, menu_label: string, content: string }> };
+
 
 export const HomeQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"homeQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"modificationTypes"},"name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"type_short_label"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"guideSubclasses"},"name":{"kind":"Name","value":"guides"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subclass"}},{"kind":"Field","name":{"kind":"Name","value":"subclass_label"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"targetUnits"},"name":{"kind":"Name","value":"targets"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unit"}}]}},{"kind":"Field","name":{"kind":"Name","value":"organisms"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"options"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"3"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"shortname"}}]}},{"kind":"Field","name":{"kind":"Name","value":"organismsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}}]}}]} as unknown as DocumentNode<HomeQueryQuery, HomeQueryQueryVariables>;
 export const ModificationAndTargetSelectionQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"modificationAndTargetSelectionQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"modificationTypes"}},"type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ModifType"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"targetNames"}},"type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"organismIds"}},"type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"targetsBase"},"name":{"kind":"Name","value":"targets"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"unit"}}]}},{"kind":"Field","name":{"kind":"Name","value":"targets"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modifications_SOME"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"type_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"modificationTypes"}}}]}},{"kind":"ObjectField","name":{"kind":"Name","value":"genome"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"organism"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"organismIds"}}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"modificationsBase"},"name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type_label"}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"modifications"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"target"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"targetNames"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"genome"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"organism"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"organismIds"}}}]}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"organismsBase"},"name":{"kind":"Name","value":"organisms"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"organisms"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"tableEntries_SOME"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modification"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"type_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"modificationTypes"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"target"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"targetNames"}}}]}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ModificationAndTargetSelectionQueryQuery, ModificationAndTargetSelectionQueryQueryVariables>;
@@ -8934,4 +8946,6 @@ export const ModificationByIdQueryDocument = {"kind":"Document","definitions":[{
 export const GuideByIdQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"guideByIdQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"guides"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"altnames"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"length"}},{"kind":"Field","name":{"kind":"Name","value":"class"}},{"kind":"Field","name":{"kind":"Name","value":"subclass_label"}},{"kind":"Field","alias":{"kind":"Name","value":"chromosomeConnection"},"name":{"kind":"Name","value":"parentConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"node"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"graphql_type"},"value":{"kind":"EnumValue","value":"Chromosome"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"strand"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"length"}},{"kind":"Field","name":{"kind":"Name","value":"graphql_type"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"host_genes"}},{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"genome"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"organism"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"boxConnections"},"name":{"kind":"Name","value":"featuresConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"NOT"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"node"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"class"},"value":{"kind":"EnumValue","value":"DuplexFragment"}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HasFeature"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"annotation"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"modificationsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","name":{"kind":"Name","value":"interactions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"duplexes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"primaryStrandsConnection"},"name":{"kind":"Name","value":"strandsConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"edge"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"primary"},"value":{"kind":"BooleanValue","value":true}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"primary"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"parentConnection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"secondaryStrandsConnection"},"name":{"kind":"Name","value":"strandsConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"edge"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"primary"},"value":{"kind":"BooleanValue","value":false}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"primary"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"parentConnection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"index"}}]}},{"kind":"Field","name":{"kind":"Name","value":"modification"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"symbol"}},{"kind":"Field","name":{"kind":"Name","value":"symbol_label"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"type_short_label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"target"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"class"}},{"kind":"Field","name":{"kind":"Name","value":"unit"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"cluster"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"clusterAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","name":{"kind":"Name","value":"isoform"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"guides"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"guidesAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"isoformAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","name":{"kind":"Name","value":"chebi_id"}},{"kind":"Field","name":{"kind":"Name","value":"so_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"targets"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modifications_SOME"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"guides_SOME"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"class"}},{"kind":"Field","name":{"kind":"Name","value":"unit"}}]}}]}}]} as unknown as DocumentNode<GuideByIdQueryQuery, GuideByIdQueryQueryVariables>;
 export const TargetByIdQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"targetByIdQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"targets"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"altnames"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"length"}},{"kind":"Field","name":{"kind":"Name","value":"class"}},{"kind":"Field","name":{"kind":"Name","value":"unit"}},{"kind":"Field","alias":{"kind":"Name","value":"chromosomeConnection"},"name":{"kind":"Name","value":"parentConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"node"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"graphql_type"},"value":{"kind":"EnumValue","value":"Chromosome"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"strand"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"graphql_type"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"genome"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"organism"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"modificationsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","name":{"kind":"Name","value":"interactions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"duplexes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"primaryStrandsConnection"},"name":{"kind":"Name","value":"strandsConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"edge"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"primary"},"value":{"kind":"BooleanValue","value":true}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"primary"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"parentConnection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"secondaryStrandsConnection"},"name":{"kind":"Name","value":"strandsConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"edge"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"primary"},"value":{"kind":"BooleanValue","value":false}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"primary"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"parentConnection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"index"}}]}},{"kind":"Field","name":{"kind":"Name","value":"modification"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"symbol"}},{"kind":"Field","name":{"kind":"Name","value":"symbol_label"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"type_short_label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"guide"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"subclass_label"}},{"kind":"Field","name":{"kind":"Name","value":"class"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"chebi_id"}},{"kind":"Field","name":{"kind":"Name","value":"so_id"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"secondary_struct_file"}}]}},{"kind":"Field","name":{"kind":"Name","value":"guides"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modifications_SOME"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"target"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"class"}}]}}]}}]} as unknown as DocumentNode<TargetByIdQueryQuery, TargetByIdQueryQueryVariables>;
 export const ClusterByIdQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"clusterByIdQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"clusters"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"guides"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"class"}},{"kind":"Field","name":{"kind":"Name","value":"subclass_label"}},{"kind":"Field","name":{"kind":"Name","value":"modificationsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"chromosomeConnection"},"name":{"kind":"Name","value":"parentConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"node"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"graphql_type"},"value":{"kind":"EnumValue","value":"Chromosome"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"guidesAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"referenceGuide"},"name":{"kind":"Name","value":"guides"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"options"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"chromosome"},"name":{"kind":"Name","value":"parent"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"graphql_type"},"value":{"kind":"EnumValue","value":"Chromosome"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"genome"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"organism"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<ClusterByIdQueryQuery, ClusterByIdQueryQueryVariables>;
-export const DatabaseStatisticsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"databaseStatisticsQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"organismsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allModifications"},"name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allModificationsCount"},"name":{"kind":"Name","value":"modificationsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"nonOrphanModificationsCount"},"name":{"kind":"Name","value":"modificationsAggregate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"guidesAggregate"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"count_GT"},"value":{"kind":"IntValue","value":"0"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allGuides"},"name":{"kind":"Name","value":"guides"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subclass"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allGuidesCount"},"name":{"kind":"Name","value":"guidesAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"nonOrphanGuidesCount"},"name":{"kind":"Name","value":"guidesAggregate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modificationsAggregate"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"count_GT"},"value":{"kind":"IntValue","value":"0"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}}]}}]} as unknown as DocumentNode<DatabaseStatisticsQueryQuery, DatabaseStatisticsQueryQueryVariables>;
\ No newline at end of file
+export const DatabaseStatisticsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"databaseStatisticsQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"organismsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allModifications"},"name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allModificationsCount"},"name":{"kind":"Name","value":"modificationsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"nonOrphanModificationsCount"},"name":{"kind":"Name","value":"modificationsAggregate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"guidesAggregate"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"count_GT"},"value":{"kind":"IntValue","value":"0"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allGuides"},"name":{"kind":"Name","value":"guides"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subclass"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allGuidesCount"},"name":{"kind":"Name","value":"guidesAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"nonOrphanGuidesCount"},"name":{"kind":"Name","value":"guidesAggregate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modificationsAggregate"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"count_GT"},"value":{"kind":"IntValue","value":"0"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}}]}}]} as unknown as DocumentNode<DatabaseStatisticsQueryQuery, DatabaseStatisticsQueryQueryVariables>;
+export const LegalDocumentListQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"legalDocumentListQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"documents"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"legals"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"menu_label"}}]}}]}}]}}]} as unknown as DocumentNode<LegalDocumentListQueryQuery, LegalDocumentListQueryQueryVariables>;
+export const LegalDocumentByIdQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"legalDocumentByIdQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"mdPages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"menu_label"}},{"kind":"Field","name":{"kind":"Name","value":"content"}}]}}]}}]} as unknown as DocumentNode<LegalDocumentByIdQueryQuery, LegalDocumentByIdQueryQueryVariables>;
\ No newline at end of file
diff --git a/src/gql/queries.ts b/src/gql/queries.ts
index 865fe3172def4a328e12c8402c1c75523ffdd6ca..cf7a3adf4cca63a9b4a27b4cfb3608f9061da828 100644
--- a/src/gql/queries.ts
+++ b/src/gql/queries.ts
@@ -838,3 +838,30 @@ export const databaseStatisticsQuery = graphql(/* GraphQL */ `
     }
   }
 `)
+
+/**
+ * Get the list of legal documents of the website
+ */
+export const legalDocumentListQuery = graphql(/* GraphQL */ `
+  query legalDocumentListQuery {
+    documents {
+      legals {
+        id
+        menu_label
+      }
+    }
+  }
+`)
+
+/**
+ * Get a legal document by its ID
+ */
+export const legalDocumentByIdQuery = graphql(/* GraphQL */ `
+  query legalDocumentByIdQuery($id: ID) {
+    mdPages(where: { id: $id }) {
+      id
+      menu_label
+      content
+    }
+  }
+`)
diff --git a/src/layouts/FooterLayout.vue b/src/layouts/FooterLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f0daf9bb50fcd7d8be0fe1a0c82e027d4d8cbbb
--- /dev/null
+++ b/src/layouts/FooterLayout.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/**
+ * Vue imports
+ */
+import { computed, ref } from 'vue'
+/**
+ * Components imports
+ */
+import TieredMenu from 'primevue/tieredmenu'
+import Button from 'primevue/button'
+import IconFa6SolidAddressCard from '~icons/fa6-solid/address-card'
+import IconFa6SolidChevronUp from '~icons/fa6-solid/chevron-up'
+/**
+ * Other 3rd-party imports
+ */
+import { useQuery } from '@urql/vue'
+/**
+ * Types imports
+ */
+import type { MenuItem } from 'primevue/menuitem'
+/**
+ * Utils imports
+ */
+import { legalDocumentListQuery } from '@/gql/queries'
+
+/**
+ * Reactive urql GraphQL query object, updated with query state & response.
+ */
+const gqlQuery = useQuery({
+  query: legalDocumentListQuery
+})
+
+/**
+ * The list of legal documents
+ */
+const legalDocuments = computed(() => gqlQuery.data.value?.documents[0]?.legals)
+
+/**
+ * The items to display in the legal documents menu.
+ */
+const legalDocumentsMenuItems = computed<MenuItem[] | undefined>(() =>
+  legalDocuments.value?.map((legalDocument) => ({
+    label: legalDocument.menu_label,
+    routerDest: { name: 'legal', params: { documentId: legalDocument.id } }
+  }))
+)
+
+/**
+ * Legal documents menu `TieredMenu` component.
+ */
+const legalMenu = ref<TieredMenu>()
+
+/**
+ * Used to toggle the legal documents menu.
+ * @param event The mouse event which triggered the toggle.
+ */
+const toggleLegalMenu = (event: MouseEvent) => legalMenu.value?.toggle(event)
+</script>
+
+<template>
+  <div class="flex min-h-screen flex-col">
+    <slot></slot>
+    <footer
+      class="flex h-20 w-full items-center justify-center bg-slate-800 p-2"
+    >
+      <Button text class="!block !text-white">
+        <RouterLink :to="{ name: 'contact' }">
+          <icon-fa6-solid-address-card class="mr-2 inline" />
+          <span>Contact us</span>
+        </RouterLink>
+      </Button>
+
+      <Button
+        aria-haspopup="true"
+        aria-controls="overlay_tieredmenu"
+        text
+        class="!block !text-white"
+        @click="toggleLegalMenu"
+      >
+        Legal <icon-fa6-solid-chevron-up class="ml-2 inline" />
+      </Button>
+      <TieredMenu
+        id="overlay_tieredmenu"
+        ref="legalMenu"
+        :model="legalDocumentsMenuItems"
+        popup
+      >
+        <template #item="{ item, props }">
+          <RouterLink
+            v-if="item.routerDest"
+            :to="item.routerDest"
+            v-bind="props.action"
+          >
+            <span v-bind="props.label">{{ item.label }}</span>
+          </RouterLink>
+        </template>
+      </TieredMenu>
+    </footer>
+  </div>
+</template>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index e1a386cbffa3756e94ec39084e0c0b09e4f9a389..e0442560bc76b768347037dd80b19dd81b5c24b7 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -3,12 +3,12 @@
  * Components imports
  */
 import SearchBar from '@/components/SearchBar.vue'
+import FooterLayout from './FooterLayout.vue'
 import Image from 'primevue/image'
 import Menubar from 'primevue/menubar'
 import IconFa6SolidTable from '~icons/fa6-solid/table'
 import IconFa6SolidDatabase from '~icons/fa6-solid/database'
 import IconFa6SolidCircleQuestion from '~icons/fa6-solid/circle-question'
-import IconFa6SolidAddressCard from '~icons/fa6-solid/address-card'
 import IconFa6SolidMagnifyingGlass from '~icons/fa6-solid/magnifying-glass'
 import IconFa6SolidCircleXmark from '~icons/fa6-solid/circle-xmark'
 import IconFa6SolidArrowRight from '~icons/fa6-solid/arrow-right'
@@ -22,10 +22,29 @@ import type { MenuItem } from 'primevue/menuitem'
  */
 import logoUrl from '@/assets/images/logo.svg'
 
+/**
+ * A menu item, with an additional icon as a component.
+ */
 interface CustomMenuItem extends MenuItem {
+  /** The menu item icon as a component. */
   iconComponent: Component
 }
 
+/**
+ * Component props.
+ */
+defineProps<{
+  /** Whether to add some padding (`2rem` at the top and `0.5rem` elsewhere) to
+   * the `<main>` element holding the slot content. */
+  padded?: boolean
+  /** Whether to use a `flex` layout for the `<main>` element holding the
+   * slot content. */
+  flex?: boolean
+}>()
+
+/**
+ * The items to display in the navigation menu.
+ */
 const menuItems: CustomMenuItem[] = [
   {
     label: 'Data Table',
@@ -41,61 +60,66 @@ const menuItems: CustomMenuItem[] = [
     label: 'Help',
     iconComponent: IconFa6SolidCircleQuestion,
     routerDest: { name: 'about' }
-  },
-  {
-    label: 'Contact',
-    iconComponent: IconFa6SolidAddressCard,
-    routerDest: { name: 'contact' }
   }
 ]
 </script>
 
 <template>
-  <header class="flex h-32 justify-between gap-4 px-4 shadow">
-    <RouterLink :to="{ name: 'home' }" class="flex items-center">
-      <Image
-        alt="SnoBoard logo"
-        :pt="{ image: { class: 'max-h-24' } }"
-        :src="logoUrl"
-      ></Image>
-    </RouterLink>
-    <div class="flex items-center gap-4">
-      <Menubar :model="menuItems">
-        <template #item="{ item, props }">
-          <RouterLink
-            v-if="item.routerDest"
-            :to="item.routerDest"
-            :="props.action"
-          >
-            <component :is="item.iconComponent || ''" :="props.icon" />
-            <span :="props.label">{{ item.label }}</span>
-          </RouterLink>
-        </template>
-      </Menubar>
-      <SearchBar disabled>
-        <template #label>
-          <span>Search</span>
-        </template>
+  <FooterLayout>
+    <header class="flex h-32 justify-between gap-4 px-4 shadow">
+      <RouterLink :to="{ name: 'home' }" class="flex items-center">
+        <Image
+          alt="SnoBoard logo"
+          :pt="{ image: { class: 'max-h-24' } }"
+          :src="logoUrl"
+        ></Image>
+      </RouterLink>
 
-        <template #icon="{ className }">
-          <icon-fa6-solid-magnifying-glass :class="className" />
-        </template>
+      <div class="flex items-center gap-4">
+        <Menubar :model="menuItems">
+          <template #item="{ item, props }">
+            <RouterLink
+              v-if="item.routerDest"
+              :to="item.routerDest"
+              :="props.action"
+            >
+              <component :is="item.iconComponent || ''" :="props.icon" />
+              <span :="props.label">{{ item.label }}</span>
+            </RouterLink>
+          </template>
+        </Menubar>
 
-        <template #clear-icon="{ clearSearch, searchEmpty, className }">
-          <icon-fa6-solid-circle-xmark
-            v-show="!searchEmpty"
-            :class="[className, 'cursor-pointer transition-all']"
-            @click="clearSearch()"
-          />
-        </template>
+        <SearchBar disabled>
+          <template #label>
+            <span>Search</span>
+          </template>
+          <template #icon="{ className }">
+            <icon-fa6-solid-magnifying-glass :class="className" />
+          </template>
+          <template #clear-icon="{ clearSearch, searchEmpty, className }">
+            <icon-fa6-solid-circle-xmark
+              v-show="!searchEmpty"
+              :class="[className, 'cursor-pointer transition-all']"
+              @click="clearSearch()"
+            />
+          </template>
+          <template #button>
+            <icon-fa6-solid-arrow-right />
+          </template>
+        </SearchBar>
+      </div>
+    </header>
 
-        <template #button>
-          <icon-fa6-solid-arrow-right />
-        </template>
-      </SearchBar>
-    </div>
-  </header>
-  <main class="mt-8 p-2">
-    <slot></slot>
-  </main>
+    <main
+      :class="[
+        'flex-grow',
+        {
+          'flex flex-col': flex,
+          'p-2 pt-8': padded
+        }
+      ]"
+    >
+      <slot></slot>
+    </main>
+  </FooterLayout>
 </template>
diff --git a/src/router/index.ts b/src/router/index.ts
index b4ee5e29926bef1e737617b2fc11096f94d53a46..aa84efe377271b63fb200f5382cd357001020e22 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -107,14 +107,19 @@ const router = createRouter({
           !to.query.id ||
           !parseInt(to.query.id)
         ) {
-          router.replace({ name: 'lost' })
+          router.replace({ name: 'notFound' })
         }
       }
     },
     {
-      path: '/details/',
-      name: 'details',
+      path: '/details',
       children: [
+        {
+          path: '',
+          redirect: {
+            name: 'notFound'
+          }
+        },
         {
           path: 'guide',
           name: 'guideDetails',
@@ -125,7 +130,7 @@ const router = createRouter({
           }),
           beforeEnter: (to) => {
             if (typeof to.query.id !== 'string') {
-              router.replace({ name: 'lost' })
+              router.replace({ name: 'notFound' })
             }
           }
         },
@@ -139,7 +144,7 @@ const router = createRouter({
           }),
           beforeEnter: (to) => {
             if (typeof to.query.id !== 'string') {
-              router.replace({ name: 'lost' })
+              router.replace({ name: 'notFound' })
             }
           }
         },
@@ -153,7 +158,7 @@ const router = createRouter({
           }),
           beforeEnter: (to) => {
             if (typeof to.query.id !== 'string') {
-              router.replace({ name: 'lost' })
+              router.replace({ name: 'notFound' })
             }
           }
         },
@@ -164,7 +169,7 @@ const router = createRouter({
           props: (to) => ({ clusterId: to.query.id }),
           beforeEnter: (to) => {
             if (typeof to.query.id !== 'string') {
-              router.replace({ name: 'lost' })
+              router.replace({ name: 'notFound' })
             }
           }
         }
@@ -210,10 +215,19 @@ const router = createRouter({
         title: 'Contact'
       }
     },
+    {
+      path: '/legal/:documentId',
+      name: 'legal',
+      meta: {
+        title: 'Legal document'
+      },
+      props: true,
+      component: () => import('@/views/LegalView.vue')
+    },
     {
       path: '/:unknownPath(.*)*',
-      name: 'lost',
-      component: () => import('@/views/LostView.vue'),
+      name: 'notFound',
+      component: () => import('@/views/404View.vue'),
       meta: {
         title: "You're lost !"
       },
diff --git a/src/views/LostView.vue b/src/views/404View.vue
similarity index 90%
rename from src/views/LostView.vue
rename to src/views/404View.vue
index fc3fe2b38222618789a1879155e7c856570eb5cd..cfbb9fabcf6f49cabdbb477f82007dbdf144cef2 100644
--- a/src/views/LostView.vue
+++ b/src/views/404View.vue
@@ -6,7 +6,7 @@ import MainLayout from '@/layouts/MainLayout.vue'
 </script>
 
 <template>
-  <MainLayout>
+  <MainLayout padded>
     <h1>Looks like you're lost...</h1>
     <h2>404</h2>
   </MainLayout>
diff --git a/src/views/APIView.vue b/src/views/APIView.vue
index 0bb841b4cc25232820e970b413749ded3ae5c7c6..73bdbca3897e35d921c08f8c947aed8adb05c0a8 100644
--- a/src/views/APIView.vue
+++ b/src/views/APIView.vue
@@ -1,29 +1,150 @@
 <script setup lang="ts">
+/**
+ * Vue imports.
+ */
+import { computed, onMounted, ref } from 'vue'
 /**
  * Components imports
  */
 import MainLayout from '@/layouts/MainLayout.vue'
 import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import Checkbox from 'primevue/checkbox'
+import IconDeviconNeo4j from '~icons/devicon/neo4j'
+import IconLogosGraphql from '~icons/logos/graphql'
+/**
+ * Other 3rd-party imports
+ */
+import { ApolloSandbox } from '@apollo/sandbox'
+import { useStorage } from '@vueuse/core'
+
+/**
+ * Reactive local storage entry to show or not the info dialog at landing.
+ */
+const skipInfoDialog = useStorage('skipInfoDialog', false)
+
+/**
+ * Whether to show the info dialog.
+ */
+const isInfoDialogShown = ref(!skipInfoDialog.value)
+
+/**
+ * Wether to remember to not show the info dialog again.
+ */
+const shouldNotShowInfoDialogAgain = ref(false)
+
+/**
+ * Callback to close the info dialog & update local storage if necessary.
+ */
+const closeInfoDialog = () => {
+  isInfoDialogShown.value = false
+  skipInfoDialog.value = shouldNotShowInfoDialogAgain.value
+}
+
+/**
+ * API URL
+ */
+const ApiUrl = computed(() => `${import.meta.env.VITE_API_URL}/graphql`)
+
+/**
+ * Mounting hook, creates the embedded Apollo Sandbox.
+ */
+onMounted(
+  () =>
+    new ApolloSandbox({
+      target: '#embedded-sandbox',
+      initialEndpoint: ApiUrl.value,
+      initialState: {
+        document:
+          'query ExampleQuery {%0A%20 modifications {%0A%20%20%20 name%0A%20 }%0A}%0A'
+      }
+    })
+)
 </script>
 
 <template>
-  <MainLayout>
-    <div class="text-center">
-      <h1 class="mb-16 text-4xl font-bold">API documentation</h1>
-      <div class="flex flex-col items-center gap-16 text-xl">
-        There is 2 ways of viewing the API documentation :
-        <div class="flex items-center gap-4 font-bold italic">
-          <a href="/api/docs"
-            ><Button :pt="{ root: { class: '!text-2xl' } }"
-              >Swagger UI</Button
-            ></a
-          >
-          or
-          <a href="/api/redoc"
-            ><Button :pt="{ root: { class: '!text-2xl' } }">Redoc</Button></a
-          >
-        </div>
+  <MainLayout flex>
+    <div
+      id="embedded-sandbox"
+      class="flex flex-grow flex-col [&>iframe]:flex-grow"
+    />
+    <Dialog
+      v-model:visible="isInfoDialogShown"
+      :draggable="false"
+      modal
+      header="SnoBoard API"
+      class="mx-4 max-w-md text-justify"
+      :pt="{
+        mask: {
+          class: 'api-dialog-mask',
+          style: {
+            backdropFilter: 'blur(5px)',
+            transition: 'backdrop-filter 150ms ease'
+          }
+        },
+        transition: {
+          leaveToClass: 'api-dialog-leaving'
+        }
+      }"
+      @hide="closeInfoDialog"
+    >
+      <p>
+        <em class="font-bold not-italic text-lime-700">SnoBoard</em> is built
+        upon a
+        <a
+          href="https://neo4j.com/"
+          class="my-0.5 inline-block rounded bg-slate-200 px-0.5 font-medium transition-all hover:bg-slate-300"
+        >
+          <icon-devicon-neo4j class="inline text-xl" />
+          Neo4j
+        </a>
+        database, which is accessed via a
+        <a
+          href="https://graphql.org/"
+          class="my-0.5 inline-block rounded bg-slate-200 px-0.5 font-medium transition-all hover:bg-slate-300"
+        >
+          <icon-logos-graphql class="inline" />
+          GraphQL
+        </a>
+        API.
+      </p>
+      <p>
+        This API can be browsed using the
+        <em class="font-semibold not-italic text-[#1b2240]">Apollo Sandbox</em>
+        embedded in this page, a quick guide to using it can be found
+        <a
+          href="https://www.apollographql.com/tutorials/intro-typescript/05-apollo-explorer"
+          class="whitespace-nowrap font-semibold italic text-[#1b2240] hover:underline"
+          >here</a
+        >.
+      </p>
+      <p class="my-4">
+        For programmatic use of the API, the GraphQL endpoint is accessible at:
+      </p>
+      <code
+        class="mx-auto my-4 block w-max rounded bg-slate-200 px-2 py-1 font-semibold"
+      >
+        {{ ApiUrl }}
+      </code>
+      <Button
+        label="Got it !"
+        class="mx-auto my-4 !flex"
+        @click="closeInfoDialog"
+      />
+      <div class="flex items-center justify-center gap-2">
+        <Checkbox
+          v-model="shouldNotShowInfoDialogAgain"
+          input-id="dont-show-ui-tour"
+          binary
+        />
+        <label for="dont-show-ui-tour">Don't show again</label>
       </div>
-    </div>
+    </Dialog>
   </MainLayout>
 </template>
+
+<style>
+.api-dialog-mask:has(> .api-dialog-leaving) {
+  backdrop-filter: none !important;
+}
+</style>
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index d87484ee728d67e530e7ebbef991a397ddf759cc..4ee97f369e2e1ba63658a914b79b9ee942ae296c 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -6,7 +6,7 @@ import MainLayout from '@/layouts/MainLayout.vue'
 </script>
 
 <template>
-  <MainLayout>
+  <MainLayout padded>
     <h1>About</h1>
   </MainLayout>
 </template>
diff --git a/src/views/ClusterView.vue b/src/views/ClusterView.vue
index 67ec26b284909824d90dae8c5408747869ec245e..769549f121408f4d998e8c48c0bcd030c1d7dce8 100644
--- a/src/views/ClusterView.vue
+++ b/src/views/ClusterView.vue
@@ -149,7 +149,7 @@ const linkListGuides = computed<LinkListItemModel[]>(
 </script>
 
 <template>
-  <MainLayout>
+  <MainLayout padded>
     <h1 class="mb-4 text-center text-3xl font-semibold text-slate-700">
       Cluster
     </h1>
@@ -159,7 +159,7 @@ const linkListGuides = computed<LinkListItemModel[]>(
 
     <Panel
       toggleable
-      class="mx-auto mb-8 max-w-6xl text-center 2xl:max-w-7xl"
+      class="mx-auto mb-16 max-w-6xl text-center 2xl:max-w-7xl"
       :pt="{
         header: { class: '!bg-slate-50' },
         toggler: { class: 'hover:!bg-slate-100' }
@@ -276,7 +276,7 @@ const linkListGuides = computed<LinkListItemModel[]>(
       </div>
     </Panel>
 
-    <Panel toggleable class="mx-auto max-w-6xl">
+    <Panel toggleable class="mx-auto mb-16 max-w-6xl">
       <template #header="scope">
         <icon-fa6-solid-list :class="scope.class" />
         <span :class="scope.class"
diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue
index ea41db93a99652429f6af74f522e516ff308b559..45171292ef2fe708d0ca80b22b34252127d9de23 100644
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -6,7 +6,27 @@ import MainLayout from '@/layouts/MainLayout.vue'
 </script>
 
 <template>
-  <MainLayout>
-    <h1>Contact</h1>
+  <MainLayout padded>
+    <section
+      ref="aboutSectionElement"
+      class="prose prose-lg prose-slate mx-auto mb-8 pt-8 prose-headings:text-center prose-p:text-justify"
+    >
+      <h1>Contact us</h1>
+
+      <p>
+        You can contact us by sending an email to
+        <a href="mailto:support.bioinfo.genotoul@inrae.fr">
+          support.bioinfo.genotoul@inrae.fr
+        </a>
+        .
+      </p>
+
+      <blockquote class="text-slate-400">
+        Please include the
+        <strong class="text-slate-700">[snoboard-support]</strong> tag at the
+        beginning of the email's subject, to ensure targetting the appropriate
+        service and get a faster response.
+      </blockquote>
+    </section>
   </MainLayout>
 </template>
diff --git a/src/views/DataTableView.vue b/src/views/DataTableView.vue
index 1e776f9891a490ed801f3b7255e15f67eb7db982..cfe0187a9c37b1478f08edb3e4e64bc3774aa7a0 100644
--- a/src/views/DataTableView.vue
+++ b/src/views/DataTableView.vue
@@ -843,7 +843,7 @@ const scrollToTableTop = () =>
 
 <template>
   <MainLayout>
-    <div class="table-wrapper">
+    <div class="table-wrapper mb-16">
       <DataTable
         v-model:filters="filters"
         :global-filter-fields="globalFilterColumnFields"
diff --git a/src/views/GuideView.vue b/src/views/GuideView.vue
index d1ec653e8d607f6db24fa3533ebdabaf94e11339..a8ffd4ebaddbd88892a6d50eb77d3248eabcc2af 100644
--- a/src/views/GuideView.vue
+++ b/src/views/GuideView.vue
@@ -427,7 +427,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
 </script>
 
 <template>
-  <MainLayout>
+  <MainLayout padded>
     <h1 class="mb-4 text-center text-3xl font-semibold text-slate-700">
       {{ guide?.name }}
     </h1>
@@ -476,7 +476,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
 
     <Panel
       toggleable
-      class="mx-auto mb-8 max-w-6xl text-center 2xl:max-w-7xl"
+      class="mx-auto mb-16 max-w-6xl text-center 2xl:max-w-7xl"
       :pt="{
         header: { class: '!bg-slate-50' },
         toggler: { class: 'hover:!bg-slate-100' }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e842271e52445f370df31c9680c0f2f1a875a76d..5b671044c01428f37b437488aff715e25d991929 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,14 +2,15 @@
 /**
  * Vue imports
  */
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 /**
  * Components imports
  */
-import Image from 'primevue/image'
-import Menubar from 'primevue/menubar'
+import FooterLayout from '@/layouts/FooterLayout.vue'
 import SearchBar from '@/components/SearchBar.vue'
 import BaseRenderedMarkdown from '@/components/BaseRenderedMarkdown.vue'
+import Image from 'primevue/image'
+import Menubar from 'primevue/menubar'
 import IconFa6SolidMagnifyingGlass from '~icons/fa6-solid/magnifying-glass'
 import IconFa6SolidCircleXmark from '~icons/fa6-solid/circle-xmark'
 import IconFa6SolidArrowRight from '~icons/fa6-solid/arrow-right'
@@ -20,6 +21,8 @@ import IconFa6SolidTable from '~icons/fa6-solid/table'
 import IconFa6SolidDatabase from '~icons/fa6-solid/database'
 import IconFa6SolidPaw from '~icons/fa6-solid/paw'
 import IconFa6SolidBullseye from '~icons/fa6-solid/bullseye'
+import IconTablerCircleArrowDown from '~icons/tabler/circle-arrow-down'
+import IconTablerCircleArrowDownFilled from '~icons/tabler/circle-arrow-down-filled'
 import IconSnoboardGuide from '~icons/snoboard/guide'
 import IconSnoboardModification from '~icons/snoboard/modification'
 /**
@@ -353,76 +356,97 @@ const menuItems = computed<MenuItem[]>(() => [
     ]
   }
 ])
+
+const aboutSectionElement = ref<HTMLElement>()
 </script>
 
 <template>
-  <main class="mx-auto max-w-6xl px-4 text-center 2xl:max-w-7xl">
-    <Image
-      class="mx-auto my-8 inline-block w-3/4 max-w-sm sm:my-16"
-      alt="SnoBoard logo"
-      :src="logoUrl"
-    />
-
-    <SearchBar disabled class="mx-auto mb-16 max-w-xl 2xl:mb-16">
-      <template #icon="{ className }">
-        <icon-fa6-solid-magnifying-glass :class="className" />
-      </template>
-
-      <template #clear-icon="{ clearSearch, searchEmpty, className }">
-        <icon-fa6-solid-circle-xmark
-          v-show="!searchEmpty"
-          :class="[className, 'cursor-pointer transition-all']"
-          @click="clearSearch()"
-        />
-      </template>
-
-      <template #label>
-        <span>Search</span>
-      </template>
-
-      <template #hint>
-        <span>Examples: ...</span>
-      </template>
-
-      <template #button>
-        <icon-fa6-solid-arrow-right />
-      </template>
-    </SearchBar>
-
-    <div class="flex justify-center">
-      <Menubar
-        :model="menuItems"
-        :pt="{
-          submenu: {
-            style: {
-              minWidth: 'max-content'
-            }
-          },
-          separator: {
-            style: {
-              margin: '0 1rem',
-              border: `solid ${tailwindDefaultColors['slate'][300]} 1px`,
-              height: '3rem',
-              borderRadius: '999999px'
+  <FooterLayout>
+    <main class="mx-auto h-screen max-w-6xl px-4 text-center 2xl:max-w-7xl">
+      <Image
+        class="mx-auto my-8 inline-block w-3/4 max-w-sm sm:my-16"
+        alt="SnoBoard logo"
+        :src="logoUrl"
+      />
+      <SearchBar disabled class="mx-auto mb-16 max-w-xl 2xl:mb-16">
+        <template #icon="{ className }">
+          <icon-fa6-solid-magnifying-glass :class="className" />
+        </template>
+        <template #clear-icon="{ clearSearch, searchEmpty, className }">
+          <icon-fa6-solid-circle-xmark
+            v-show="!searchEmpty"
+            :class="[className, 'cursor-pointer transition-all']"
+            @click="clearSearch()"
+          />
+        </template>
+        <template #label>
+          <span>Search</span>
+        </template>
+        <template #hint>
+          <span>Examples: ...</span>
+        </template>
+        <template #button>
+          <icon-fa6-solid-arrow-right />
+        </template>
+      </SearchBar>
+      <div class="flex justify-center">
+        <Menubar
+          :model="menuItems"
+          :pt="{
+            submenu: {
+              style: {
+                minWidth: 'max-content'
+              }
+            },
+            separator: {
+              style: {
+                margin: '0 1rem',
+                border: `solid ${tailwindDefaultColors['slate'][300]} 1px`,
+                height: '3rem',
+                borderRadius: '999999px'
+              }
             }
-          }
-        }"
-      >
-        <template #item="{ item, props, hasSubmenu, root }">
-          <span :class="[{ 'font-normal': item.indent }]">
-            <RouterLink
-              v-if="item.route && !hasSubmenu"
-              :to="item.route"
-              custom
-              #="{ href, navigate }"
-            >
-              <a :href="href" :="props.action" @click="navigate">
+          }"
+        >
+          <template #item="{ item, props, hasSubmenu, root }">
+            <span :class="[{ 'font-normal': item.indent }]">
+              <RouterLink
+                v-if="item.route && !hasSubmenu"
+                :to="item.route"
+                custom
+                #="{ href, navigate }"
+              >
+                <a :href="href" :="props.action" @click="navigate">
+                  <component
+                    :is="item.iconComponent || ''"
+                    v-if="item.iconComponent"
+                    :="props.icon"
+                  />
+                  <span
+                    v-if="item.indent"
+                    class="mr-2"
+                    :style="{ paddingLeft: `${item.indent}rem` }"
+                  >
+                    &rarr;
+                  </span>
+                  <BaseRenderedMarkdown
+                    v-if="typeof item.label === 'string'"
+                    :stringified-markdown="item.label"
+                  />
+                </a>
+              </RouterLink>
+              <a
+                v-else
+                :href="item.url"
+                :target="item.target"
+                :="props.action"
+                class="flex"
+              >
                 <component
                   :is="item.iconComponent || ''"
                   v-if="item.iconComponent"
                   :="props.icon"
                 />
-
                 <span
                   v-if="item.indent"
                   class="mr-2"
@@ -430,52 +454,84 @@ const menuItems = computed<MenuItem[]>(() => [
                 >
                   &rarr;
                 </span>
-
                 <BaseRenderedMarkdown
                   v-if="typeof item.label === 'string'"
                   :stringified-markdown="item.label"
                 />
+                <icon-fa6-solid-chevron-down
+                  v-if="hasSubmenu && root"
+                  :="props.submenuicon"
+                />
+                <icon-fa6-solid-chevron-right
+                  v-else-if="hasSubmenu"
+                  :="props.submenuicon"
+                />
               </a>
-            </RouterLink>
-            <a
-              v-else
-              :href="item.url"
-              :target="item.target"
-              :="props.action"
-              class="flex"
-            >
-              <component
-                :is="item.iconComponent || ''"
-                v-if="item.iconComponent"
-                :="props.icon"
-              />
-
-              <span
-                v-if="item.indent"
-                class="mr-2"
-                :style="{ paddingLeft: `${item.indent}rem` }"
-              >
-                &rarr;
-              </span>
-
-              <BaseRenderedMarkdown
-                v-if="typeof item.label === 'string'"
-                :stringified-markdown="item.label"
-              />
-
-              <icon-fa6-solid-chevron-down
-                v-if="hasSubmenu && root"
-                :="props.submenuicon"
-              />
-
-              <icon-fa6-solid-chevron-right
-                v-else-if="hasSubmenu"
-                :="props.submenuicon"
-              />
-            </a>
-          </span>
-        </template>
-      </Menubar>
-    </div>
-  </main>
+            </span>
+          </template>
+        </Menubar>
+      </div>
+      <button
+        class="group absolute bottom-8 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border p-2 pl-12 pr-4 text-xl text-slate-400 shadow-lg transition-all duration-500 hover:border-slate-600 hover:text-slate-600 hover:shadow-2xl focus:border-slate-600 focus:text-slate-600 focus:shadow-2xl"
+        @click="aboutSectionElement?.scrollIntoView({ behavior: 'smooth' })"
+      >
+        <icon-tabler-circle-arrow-down
+          class="absolute left-2 top-1/2 -translate-y-1/2 text-3xl transition-all duration-500 group-hover:opacity-0 group-focus:opacity-0"
+        />
+        <icon-tabler-circle-arrow-down-filled
+          class="absolute left-2 top-1/2 -translate-y-1/2 text-3xl opacity-0 transition-all duration-500 group-hover:opacity-100 group-focus:opacity-100"
+        />
+        About SnoBoard
+      </button>
+    </main>
+    <section
+      ref="aboutSectionElement"
+      class="prose prose-lg prose-slate mx-auto mb-8 pt-8 prose-headings:text-center prose-p:text-justify"
+    >
+      <h2>What is SnoBoard ?</h2>
+      <p>
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Lacus suscipit
+        nullam rhoncus dui ex; efficitur leo? Interdum velit potenti habitant
+        dapibus arcu suspendisse. Diam ante nisl leo, quisque potenti elementum
+        est in. Libero quis cras eu dignissim litora. Vehicula mauris cubilia
+        cubilia; sit vestibulum elit fusce laoreet. Efficitur inceptos nostra
+        imperdiet neque semper dis. Orci vulputate pharetra dapibus odio nulla
+        imperdiet.
+      </p>
+      <p>
+        Dis dui malesuada turpis hac malesuada. Felis nullam pharetra vehicula
+        vestibulum mollis. Molestie suscipit vulputate vehicula amet phasellus?
+        Auctor integer taciti praesent tortor risus auctor dui. Lacinia tempus
+        erat; egestas sapien metus eleifend lectus porttitor. Praesent urna
+        class purus senectus quis tortor elit augue. Pellentesque rutrum mattis
+        neque dapibus fringilla?
+      </p>
+      <p>
+        Cubilia eros penatibus sodales volutpat massa primis dis hac. Nibh
+        maecenas lobortis class proin vitae amet sed parturient. Tristique dis
+        urna, per proin ante ac at. Faucibus risus taciti lacus sociosqu montes
+        aliquet ornare. Libero fames maecenas tincidunt ad ad dis quis. Euismod
+        congue morbi cras facilisi risus etiam justo.
+      </p>
+      <p>
+        Metus tempus odio maecenas nisl amet volutpat porttitor dapibus. Natoque
+        blandit a elementum tortor; aliquet eros. Elit sapien urna euismod,
+        aptent nunc elementum. Curae pulvinar viverra montes tristique commodo
+        cras, lectus euismod proin. Diam mi quis aliquam convallis quis dui.
+        Fusce lacus nec rutrum rhoncus nisl congue ridiculus euismod lacus.
+        Proin pharetra eleifend mus, ante sapien amet eros fusce. Ad rutrum
+        felis semper vivamus hendrerit dis ridiculus sapien ut?
+      </p>
+      <p>
+        Himenaeos turpis senectus aliquet luctus quisque facilisi nullam
+        facilisi congue. Porttitor vitae elementum lobortis; consequat ac
+        elementum purus! Cursus nunc ad sapien suscipit dignissim ipsum placerat
+        fermentum. Bibendum non mauris tortor, arcu venenatis etiam malesuada.
+        Urna taciti ultrices litora nostra efficitur velit tellus. Tellus felis
+        imperdiet ad fusce hendrerit fermentum. Magna praesent aliquet
+        adipiscing; mi diam per. Habitant at dapibus lobortis suscipit malesuada
+        litora curae eget quis.
+      </p>
+    </section>
+  </FooterLayout>
 </template>
diff --git a/src/views/LegalView.vue b/src/views/LegalView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fae48a7fb479f17fc290ae3b0bf18b726d1a2179
--- /dev/null
+++ b/src/views/LegalView.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/**
+ * Vue imports.
+ */
+import { computed, toRef } from 'vue'
+/**
+ * Components imports
+ */
+import MainLayout from '@/layouts/MainLayout.vue'
+import BaseRenderedMarkdown from '@/components/BaseRenderedMarkdown.vue'
+/**
+ * Other 3rd-party imports
+ */
+import { useQuery } from '@urql/vue'
+/**
+ * Utils imports
+ */
+import { legalDocumentByIdQuery } from '@/gql/queries'
+import { getColorWithOptionalShade } from '@/utils/colors'
+
+/**
+ * Component props.
+ */
+const props = defineProps<{
+  /** The ID of the legal document to display */
+  documentId: string
+}>()
+
+/**
+ * Reactive urql GraphQL query object, updated with query state & response.
+ */
+const gqlQuery = useQuery({
+  query: legalDocumentByIdQuery,
+  variables: toRef(() => ({
+    id: props.documentId
+  }))
+})
+
+/**
+ * The document to display, reactively updated when fetched.
+ */
+const legalDocument = computed(() =>
+  gqlQuery.data.value?.mdPages.find((page) => page.id === props.documentId)
+)
+</script>
+
+<template>
+  <MainLayout padded>
+    <BaseRenderedMarkdown
+      v-if="legalDocument"
+      id="markdown-component"
+      :stringified-markdown="legalDocument.content"
+      class="prose prose-lg prose-slate mx-auto mb-8 prose-headings:text-center prose-p:text-justify"
+    />
+  </MainLayout>
+</template>
+
+<style lang="scss">
+#markdown-component {
+  em:only-child {
+    text-align: center;
+    color: v-bind('getColorWithOptionalShade("slate", "400")');
+  }
+}
+</style>
diff --git a/src/views/ModificationView.vue b/src/views/ModificationView.vue
index 807aeed467add6364dce7cb7027420d34f9c3ce4..39b4953c4741cd30686ca35428fc46df6e55b61c 100644
--- a/src/views/ModificationView.vue
+++ b/src/views/ModificationView.vue
@@ -212,7 +212,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
 </script>
 
 <template>
-  <MainLayout>
+  <MainLayout padded>
     <h1 class="mb-4 text-center text-3xl font-semibold text-slate-700">
       {{ modification?.name }}
     </h1>
@@ -222,7 +222,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
 
     <Panel
       toggleable
-      class="mx-auto mb-8 max-w-6xl text-center 2xl:max-w-7xl"
+      class="mx-auto mb-16 max-w-6xl text-center 2xl:max-w-7xl"
       :pt="{
         header: { class: '!bg-slate-50' },
         toggler: { class: 'hover:!bg-slate-100' }
@@ -427,5 +427,3 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
     </Panel>
   </MainLayout>
 </template>
-
-<style></style>
diff --git a/src/views/OrganismView.vue b/src/views/OrganismView.vue
index 5672ec03febb34a248fef940d0f7716e16452d7b..19b000064e708a9068ecdd61b5bb30adb513137f 100644
--- a/src/views/OrganismView.vue
+++ b/src/views/OrganismView.vue
@@ -528,7 +528,7 @@ const chartConfigs = computed(() => ({
 </script>
 
 <template>
-  <MainLayout>
+  <MainLayout padded>
     <h1
       v-if="organism"
       class="mb-4 text-center text-3xl font-semibold text-slate-700"
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index e2a7e46283adc8c92856b1b842313141ee9d21ad..8f14df9c7cda0f51c714a3db61575ce72823d490 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -6,7 +6,7 @@ import MainLayout from '@/layouts/MainLayout.vue'
 </script>
 
 <template>
-  <MainLayout>
+  <MainLayout padded>
     <h1>Search</h1>
   </MainLayout>
 </template>
diff --git a/src/views/SelectionView.vue b/src/views/SelectionView.vue
index 8ae6d47edaa43bf6ca18da8384ed2f8cdcabdc67..b6b100ac642f78a99f519fbfcd93d8f3485add9e 100644
--- a/src/views/SelectionView.vue
+++ b/src/views/SelectionView.vue
@@ -190,7 +190,7 @@ const onlyTargetIdActiveMode = computed(() =>
 </script>
 
 <template>
-  <MainLayout>
+  <MainLayout padded>
     <h1 class="text-center text-3xl font-semibold text-slate-700">
       Advanced selection
     </h1>
diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index f0959d44da3a7420cf663dcce38dd321803637f6..9729c7818eccb53e49cf6d35c2c67d0ad6b89293 100644
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -224,7 +224,7 @@ const isColourBlindMode = ref(false)
 </script>
 
 <template>
-  <MainLayout>
+  <MainLayout padded>
     <h1 class="mb-4 text-center text-3xl font-semibold italic text-slate-700">
       Database statistics
     </h1>
diff --git a/src/views/TargetView.vue b/src/views/TargetView.vue
index f93e3dc77f469978a46219a812a18d59c05a54dc..d3b0f743be5bda69670b32bb71028e8a97cb661e 100644
--- a/src/views/TargetView.vue
+++ b/src/views/TargetView.vue
@@ -418,7 +418,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
 </script>
 
 <template>
-  <MainLayout>
+  <MainLayout padded>
     <h1 class="mb-4 text-center text-3xl font-semibold text-slate-700">
       {{ target?.name }}
     </h1>
@@ -467,7 +467,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
 
     <Panel
       toggleable
-      class="mx-auto mb-8 max-w-6xl text-center 2xl:max-w-7xl"
+      class="mx-auto mb-16 max-w-6xl text-center 2xl:max-w-7xl"
       :pt="{
         header: { class: '!bg-slate-50' },
         toggler: { class: 'hover:!bg-slate-100' }
diff --git a/tailwind.config.js b/tailwind.config.js
index 78a855f58f061d9addc04fee137af308bef4dd8c..0b7312ea8f7f42178c407698151f0f38fc73ec3a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,4 @@
+import TypographyPlugin from '@tailwindcss/typography'
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
@@ -15,7 +16,7 @@ export default {
       }
     }
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [TypographyPlugin],
   safelist: [
     {
       // BaseDescribedChip, BaseLinkListCard, SequenceBoard