diff --git a/nuxt-app/app.vue b/nuxt-app/app.vue
index 1e86949f..af2292f6 100644
--- a/nuxt-app/app.vue
+++ b/nuxt-app/app.vue
@@ -117,6 +117,10 @@ useHead({
       rel: "stylesheet",
       href: "https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap",
     },
+    {
+      rel: "stylesheet",
+      href: "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap",
+    },
     {
       src: "https://code.jquery.com/jquery-3.3.1.slim.min.js",
       integrity:
diff --git a/nuxt-app/assets/css/bootstrap.css b/nuxt-app/assets/css/bootstrap.css
index 052fbdf1..b6fce3e9 100644
--- a/nuxt-app/assets/css/bootstrap.css
+++ b/nuxt-app/assets/css/bootstrap.css
@@ -328,8 +328,9 @@ h3,
 h4,
 h5,
 h6 {
+  font-family: "Poppins" !important;
   margin-bottom: 0.5rem;
-  font-weight: 700;
+  font-weight: 500;
   line-height: 1.2;
   color: inherit;
 }
diff --git a/nuxt-app/assets/css/styles.css b/nuxt-app/assets/css/styles.css
index ff53f964..ed19c492 100644
--- a/nuxt-app/assets/css/styles.css
+++ b/nuxt-app/assets/css/styles.css
@@ -51,10 +51,10 @@
   --font-family-sans-serif: "Quicksand", sans-serif;
 }
 
-body{
+body {
   font-family: "Quicksand", sans-serif;
   font-optical-sizing: auto;
-  font-weight: 600;
+  font-weight: 500;
   font-style: normal;
 }
 
@@ -512,6 +512,7 @@ body {
 .tippy-box[data-theme~="ddeDark"] {
   background-color: var(--dde-dark);
   color: white;
+  font-weight: 400;
 }
 
 .tippy-box[data-theme~="ddeDark"][data-placement^="top"]
diff --git a/nuxt-app/components/CodeEditorHTML.vue b/nuxt-app/components/CodeEditorHTML.vue
new file mode 100644
index 00000000..eb9f778c
--- /dev/null
+++ b/nuxt-app/components/CodeEditorHTML.vue
@@ -0,0 +1,62 @@
+<template>
+  <div id="CM-WP" class="text-left"></div>
+</template>
+
+<script>
+import { basicSetup, EditorView } from "codemirror";
+import { EditorState } from "@codemirror/state";
+import { html } from "@codemirror/lang-html";
+import { keymap } from "@codemirror/view";
+import { defaultKeymap } from "@codemirror/commands";
+
+export default {
+  name: "CodeEditorHTML",
+  props: ["item"],
+  data: function () {
+    return {
+      editor: null,
+    };
+  },
+  methods: {
+    openEditor() {
+      let self = this;
+
+      let state = EditorState.create({
+        doc: self.item,
+        extensions: [basicSetup, html(), keymap.of(defaultKeymap)],
+      });
+
+      this.editor = new EditorView({
+        state,
+        parent: document.body.querySelector("#CM-WP"),
+      });
+      this.$store.commit("setLoading", { value: false });
+    },
+  },
+  watch: {
+    item: function (v) {
+      if (this.editor) {
+        this.editor.dispatch({
+          changes: {
+            from: 0,
+            to: this.editor.state.doc.length,
+            insert: JSON.stringify(v, null, 2),
+          },
+        });
+      }
+    },
+  },
+  mounted: function () {
+    this.$store.commit("setLoading", { value: true });
+    setTimeout(() => {
+      this.openEditor();
+    }, 1000);
+  },
+};
+</script>
+
+<style>
+#CM-WP > .cm-editor {
+  height: 100vh;
+}
+</style>
diff --git a/nuxt-app/components/CodeEditorWithProp.vue b/nuxt-app/components/CodeEditorWithProp.vue
index f15c1fa1..4387969e 100644
--- a/nuxt-app/components/CodeEditorWithProp.vue
+++ b/nuxt-app/components/CodeEditorWithProp.vue
@@ -23,35 +23,6 @@ export default {
     };
   },
   methods: {
-    SaveDefinition() {
-      let self = this;
-      let value = self.editor.state.doc;
-      let copy = Object.assign({}, self.item);
-      try {
-        copy.validation = JSON.parse(value);
-        this.$store.commit("editValidationItem", {
-          item: copy,
-        });
-      } catch (error) {
-        new Notify({
-          status: "",
-          title: "Validation Editor Error",
-          text: error.toString(),
-          effect: "fade",
-          speed: 300,
-          customClass: null,
-          customIcon: null,
-          showIcon: true,
-          showCloseButton: true,
-          autoclose: true,
-          autotimeout: 3000,
-          gap: 20,
-          distance: 20,
-          type: 1,
-          position: "right top",
-        });
-      }
-    },
     openEditor() {
       let self = this;
       let language = new Compartment(),
diff --git a/nuxt-app/components/Footer.vue b/nuxt-app/components/Footer.vue
index c65fb596..0fc46e1c 100644
--- a/nuxt-app/components/Footer.vue
+++ b/nuxt-app/components/Footer.vue
@@ -15,7 +15,7 @@
             </li>
             <li>
               <nuxt-link class="d-block text-light" to="/portal"
-                >Data Portals</nuxt-link
+                >Data portals</nuxt-link
               >
             </li>
             <li>
@@ -77,6 +77,11 @@
                 >FAQ</nuxt-link
               >
             </li>
+            <li>
+              <nuxt-link class="d-block text-light" to="/how-to-cite"
+                >How to Cite</nuxt-link
+              >
+            </li>
           </ul>
         </div>
         <div class="p-2">
diff --git a/nuxt-app/components/Nav.vue b/nuxt-app/components/Nav.vue
index 473b61a3..abf1b80e 100644
--- a/nuxt-app/components/Nav.vue
+++ b/nuxt-app/components/Nav.vue
@@ -46,67 +46,35 @@ let menu = ref(false);
           <li class="nav-item">
             <nuxt-link class="nav-link h-link" to="/about">About</nuxt-link>
           </li>
-          <li
-            class="nav-item"
-            data-tippy-content="Create discoverable metadata"
-          >
-            <nuxt-link class="nav-link h-link" to="/best-practices"
-              >Discovery Guide</nuxt-link
-            >
-          </li>
-          <li class="nav-item">
-            <nuxt-link
-              class="nav-link h-link"
-              to="/schema-playground"
-              data-tippy-content="Create and Visualize a Schema"
-              >Schema Playground</nuxt-link
-            >
-          </li>
-          <!-- <li class="nav-item">
-            <nuxt-link
-              class="nav-link h-link"
-              to="/validator"
-              data-tippy-content="Validate metadata against a chosen schema"
-              >Metadata Validator</nuxt-link
-            >
-          </li> -->
           <li class="nav-item dropdown d-inline">
             <nuxt-link
               class="nav-link dropdown-toggle"
-              to="/metadata-playground"
-              id="metaDropdown"
+              to="/registries"
+              id="navbarDropdown"
               role="button"
               aria-haspopup="true"
               aria-expanded="false"
             >
-              Metadata Toolkit
+              Registry
             </nuxt-link>
             <div
               class="dropdown-menu p-1"
-              aria-labelledby="metaDropdown"
+              aria-labelledby="navbarDropdown"
               style="max-width: none"
             >
               <nuxt-link
                 class="dropdown-item mainTextLight text-left"
-                to="/validator"
+                to="/resource"
               >
-                <img
-                  :src="validator_img"
-                  width="20"
-                  height="20"
-                  alt="Validator" />
-                Metadata Validator <i class="fas fa-chevron-right"></i
+                <img :src="res_reg" width="20" height="20" alt="Validator" />
+                Resource Registry <i class="fas fa-chevron-right"></i
               ></nuxt-link>
               <nuxt-link
                 class="dropdown-item mainTextDark text-left"
-                to="/markup-generator"
+                to="/registry"
               >
-                <img
-                  :src="generator_img"
-                  width="20"
-                  height="20"
-                  alt="Generator" />
-                Markup Generator<i class="fas fa-chevron-right"></i
+                <img :src="schema_reg" width="20" height="20" alt="Validator" />
+                Schema Registry <i class="fas fa-chevron-right"></i
               ></nuxt-link>
             </div>
           </li>
@@ -143,35 +111,59 @@ let menu = ref(false);
           <li class="nav-item dropdown d-inline">
             <nuxt-link
               class="nav-link dropdown-toggle"
-              to="/registries"
-              id="navbarDropdown"
+              to="/metadata-playground"
+              id="metaDropdown"
               role="button"
               aria-haspopup="true"
               aria-expanded="false"
             >
-              Registry
+              Metadata Toolkit
             </nuxt-link>
             <div
               class="dropdown-menu p-1"
-              aria-labelledby="navbarDropdown"
+              aria-labelledby="metaDropdown"
               style="max-width: none"
             >
               <nuxt-link
                 class="dropdown-item mainTextLight text-left"
-                to="/resource"
+                to="/validator"
               >
-                <img :src="res_reg" width="20" height="20" alt="Validator" />
-                Resource Registry <i class="fas fa-chevron-right"></i
+                <img
+                  :src="validator_img"
+                  width="20"
+                  height="20"
+                  alt="Validator" />
+                Metadata Validator <i class="fas fa-chevron-right"></i
               ></nuxt-link>
               <nuxt-link
                 class="dropdown-item mainTextDark text-left"
-                to="/registry"
+                to="/markup-generator"
               >
-                <img :src="schema_reg" width="20" height="20" alt="Validator" />
-                Schema Registry <i class="fas fa-chevron-right"></i
+                <img
+                  :src="generator_img"
+                  width="20"
+                  height="20"
+                  alt="Generator" />
+                Markup Generator<i class="fas fa-chevron-right"></i
               ></nuxt-link>
             </div>
           </li>
+          <li
+            class="nav-item"
+            data-tippy-content="Create discoverable metadata"
+          >
+            <nuxt-link class="nav-link h-link" to="/best-practices"
+              >Discovery Guide</nuxt-link
+            >
+          </li>
+          <li class="nav-item">
+            <nuxt-link
+              class="nav-link h-link"
+              to="/schema-playground"
+              data-tippy-content="Create and Visualize a Schema"
+              >Schema Playground</nuxt-link
+            >
+          </li>
           <login></login>
         </ul>
       </div>
diff --git a/nuxt-app/package-lock.json b/nuxt-app/package-lock.json
index 58cdfef4..fcdf9251 100644
--- a/nuxt-app/package-lock.json
+++ b/nuxt-app/package-lock.json
@@ -7,6 +7,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@codemirror/autocomplete": "github:codemirror/autocomplete",
+        "@codemirror/lang-html": "^6.4.9",
         "@codemirror/lang-json": "github:codemirror/lang-json",
         "@codemirror/view": "github:codemirror/view",
         "@fortawesome/fontawesome-svg-core": "^6.2.0",
@@ -618,6 +619,48 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz",
+      "integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.9.tgz",
+      "integrity": "sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz",
+      "integrity": "sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/lang-json": {
       "version": "6.0.0",
       "resolved": "git+ssh://git@github.com/codemirror/lang-json.git#1fa6a51836569b821b7c8d705a2dc5c6088b715a",
@@ -628,13 +671,13 @@
       }
     },
     "node_modules/@codemirror/language": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
-      "integrity": "sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==",
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz",
+      "integrity": "sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==",
       "dependencies": {
         "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
         "@lezer/highlight": "^1.0.0",
         "@lezer/lr": "^1.0.0",
         "style-mod": "^4.0.0"
@@ -661,17 +704,17 @@
       }
     },
     "node_modules/@codemirror/state": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.2.tgz",
-      "integrity": "sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA=="
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
+      "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
     },
     "node_modules/@codemirror/view": {
-      "version": "6.2.5",
-      "resolved": "git+ssh://git@github.com/codemirror/view.git#f5871a1094fbdf52435b828a50dfd1db4afff154",
+      "version": "6.32.0",
+      "resolved": "git+ssh://git@github.com/codemirror/view.git#b58ff33ad8c90c703267aebedc8076dd3ae047ea",
       "license": "MIT",
       "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "style-mod": "^4.0.0",
+        "@codemirror/state": "^6.4.0",
+        "style-mod": "^4.1.0",
         "w3c-keyname": "^2.2.4"
       }
     },
@@ -835,18 +878,48 @@
       }
     },
     "node_modules/@lezer/common": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.1.tgz",
-      "integrity": "sha512-8TR5++Q/F//tpDsLd5zkrvEX5xxeemafEaek7mUp7Y+bI8cKQXdSqhzTOBaOogETcMOVr0pT3BBPXp13477ciw=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
+      "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ=="
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.8.tgz",
+      "integrity": "sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
     },
     "node_modules/@lezer/highlight": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.1.tgz",
-      "integrity": "sha512-duv9D23O9ghEDnnUDmxu+L8pJy4nYo4AbCOHIudUhscrLSazqeJeK1V50EU6ZufWF1zv0KJwu/frFRyZWXxHBQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
       "dependencies": {
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@lezer/html": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz",
+      "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.4.17",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.17.tgz",
+      "integrity": "sha512-bYW4ctpyGK+JMumDApeUzuIezX01H76R1foD6LcRX224FWfyYit/HYxiPGDjXXe/wQWASjCvVGoukTH68+0HIA==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
     "node_modules/@lezer/json": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.0.tgz",
@@ -857,9 +930,9 @@
       }
     },
     "node_modules/@lezer/lr": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.3.tgz",
-      "integrity": "sha512-qpB7rBzH8f6Mzjv2AVZRahcm+2Cf7nbIH++uXbvVOL1yIRvVWQ3HAM/saeBLCyz/togB7LGo76qdJYL1uKQlqA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
       "dependencies": {
         "@lezer/common": "^1.0.0"
       }
@@ -6846,9 +6919,9 @@
       }
     },
     "node_modules/style-mod": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
-      "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
     },
     "node_modules/stylehacks": {
       "version": "5.1.0",
@@ -8423,6 +8496,48 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "@codemirror/lang-css": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz",
+      "integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.0.0"
+      }
+    },
+    "@codemirror/lang-html": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.9.tgz",
+      "integrity": "sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
+    "@codemirror/lang-javascript": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz",
+      "integrity": "sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
     "@codemirror/lang-json": {
       "version": "git+ssh://git@github.com/codemirror/lang-json.git#1fa6a51836569b821b7c8d705a2dc5c6088b715a",
       "from": "@codemirror/lang-json@github:codemirror/lang-json",
@@ -8432,13 +8547,13 @@
       }
     },
     "@codemirror/language": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
-      "integrity": "sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==",
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz",
+      "integrity": "sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==",
       "requires": {
         "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
         "@lezer/highlight": "^1.0.0",
         "@lezer/lr": "^1.0.0",
         "style-mod": "^4.0.0"
@@ -8465,16 +8580,16 @@
       }
     },
     "@codemirror/state": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.2.tgz",
-      "integrity": "sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA=="
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
+      "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
     },
     "@codemirror/view": {
-      "version": "git+ssh://git@github.com/codemirror/view.git#f5871a1094fbdf52435b828a50dfd1db4afff154",
+      "version": "git+ssh://git@github.com/codemirror/view.git#b58ff33ad8c90c703267aebedc8076dd3ae047ea",
       "from": "@codemirror/view@github:codemirror/view",
       "requires": {
-        "@codemirror/state": "^6.0.0",
-        "style-mod": "^4.0.0",
+        "@codemirror/state": "^6.4.0",
+        "style-mod": "^4.1.0",
         "w3c-keyname": "^2.2.4"
       }
     },
@@ -8596,18 +8711,48 @@
       }
     },
     "@lezer/common": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.1.tgz",
-      "integrity": "sha512-8TR5++Q/F//tpDsLd5zkrvEX5xxeemafEaek7mUp7Y+bI8cKQXdSqhzTOBaOogETcMOVr0pT3BBPXp13477ciw=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
+      "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ=="
+    },
+    "@lezer/css": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.8.tgz",
+      "integrity": "sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==",
+      "requires": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
     },
     "@lezer/highlight": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.1.tgz",
-      "integrity": "sha512-duv9D23O9ghEDnnUDmxu+L8pJy4nYo4AbCOHIudUhscrLSazqeJeK1V50EU6ZufWF1zv0KJwu/frFRyZWXxHBQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
       "requires": {
         "@lezer/common": "^1.0.0"
       }
     },
+    "@lezer/html": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz",
+      "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==",
+      "requires": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "@lezer/javascript": {
+      "version": "1.4.17",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.17.tgz",
+      "integrity": "sha512-bYW4ctpyGK+JMumDApeUzuIezX01H76R1foD6LcRX224FWfyYit/HYxiPGDjXXe/wQWASjCvVGoukTH68+0HIA==",
+      "requires": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
     "@lezer/json": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.0.tgz",
@@ -8618,9 +8763,9 @@
       }
     },
     "@lezer/lr": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.3.tgz",
-      "integrity": "sha512-qpB7rBzH8f6Mzjv2AVZRahcm+2Cf7nbIH++uXbvVOL1yIRvVWQ3HAM/saeBLCyz/togB7LGo76qdJYL1uKQlqA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
       "requires": {
         "@lezer/common": "^1.0.0"
       }
@@ -13048,9 +13193,9 @@
       }
     },
     "style-mod": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
-      "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
     },
     "stylehacks": {
       "version": "5.1.0",
diff --git a/nuxt-app/package.json b/nuxt-app/package.json
index 0264b686..f27e7336 100644
--- a/nuxt-app/package.json
+++ b/nuxt-app/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@codemirror/autocomplete": "github:codemirror/autocomplete",
+    "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-json": "github:codemirror/lang-json",
     "@codemirror/view": "github:codemirror/view",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
diff --git a/nuxt-app/pages/about/index.vue b/nuxt-app/pages/about/index.vue
index b98d4564..cdcfbd07 100644
--- a/nuxt-app/pages/about/index.vue
+++ b/nuxt-app/pages/about/index.vue
@@ -121,11 +121,8 @@
       <div class="jumbotron alert-secondary">
         <h6>Cite the Data Discovery Engine</h6>
         <p>
-          Cano MA, Tsueng G, Zhou X, Xin J, Hughes LD, Mullen JL, Su AI, Wu C.
-          Data Discovery Engine a project for authoring, extending, and using
-          metadata schemas to improve FAIRness of biomedical data. BMC
-          Bioinformatics. 2023 Apr 20;24(1):159. doi:
-          10.1186/s12859-023-05258-4. PMID: 37081398; PMCID: PMC10116472.
+          For more information on how to cite the Data Discovery Engine
+          <NuxtLink to="/how-to-cite">click here</NuxtLink>.
         </p>
       </div>
 
diff --git a/nuxt-app/pages/how-to-cite/index.vue b/nuxt-app/pages/how-to-cite/index.vue
new file mode 100644
index 00000000..ca044938
--- /dev/null
+++ b/nuxt-app/pages/how-to-cite/index.vue
@@ -0,0 +1,43 @@
+<script setup></script>
+<template>
+  <div class="min-100 container">
+    <Title title="How to cite Data Discovery Engine"></Title>
+    <div class="d-flex justify-content-center align-items-center">
+      <div class="jumbotron bg-dde-dark text-light">
+        <div class="text-center mb-4">
+          <img
+            width="400"
+            src="@/assets/img/dde-logo-o-text.png"
+            alt="Project Diagram"
+          />
+        </div>
+        <p>
+          To reference the Data Discovery Engine in your work, please cite
+          <a
+            href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC10116472/"
+            target="_blank"
+            >this publication</a
+          >
+          and also the "<a href="https://discovery.biothings.io/"
+            >https://discovery.biothings.io/</a
+          >" URL:
+        </p>
+        <p>
+          Cano MA, Acosta N, Rodolpho ER, Tsueng G, Zhou X, Xin J, Hughes LD,
+          Mullen JL, Su AI, Wu C. Data Discovery Engine a project for authoring,
+          extending, and using metadata schemas to improve FAIRness of
+          biomedical data. BMC Bioinformatics. 2023 Apr 20;24(1):159. doi:
+          10.1186/s12859-023-05258-4. PMID:
+          <a href="https://pubmed.ncbi.nlm.nih.gov/37081398" target="_blank"
+            >37081398</a
+          >; PMCID:
+          <a
+            href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC10116472"
+            target="_blank"
+            >PMC10116472</a
+          >.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/nuxt-app/pages/index.vue b/nuxt-app/pages/index.vue
index 1084ac19..a74b3453 100644
--- a/nuxt-app/pages/index.vue
+++ b/nuxt-app/pages/index.vue
@@ -108,27 +108,25 @@
           class="tool-card card text-center m-2 grad d-flex justify-content-center align-items-center"
         >
           <h4 class="text-center text-light">Data Portals Available:</h4>
-          <div class="row m-0 powered-hero">
+          <div
+            class="row m-0 powered-hero d-flex justify-content-center align-items-center flex-wrap"
+          >
             <template
               v-if="portals.length"
               v-for="(portal, i) in portals"
               :key="portal.name"
             >
-              <div
-                class="col-sm-2 col-md-4 p-1 d-flex justify-content-center align-items-center"
-              >
+              <div class="col-sm-2 col-md-4 p-1">
                 <NuxtLink :to="'/portal/' + portal.linkname">
                   <img
                     :src="portal.image"
                     class="w-75"
-                    data-aos="flip-left"
-                    :data-aos-delay="i * 100"
                     :data-tippy-content="portal.name"
                   />
                 </NuxtLink>
               </div>
             </template>
-            <div class="col-sm-12 d-flex justify-content-center">
+            <div class="col-sm-12 d-flex justify-content-center flex-wrap">
               <NuxtLink to="/portal">
                 <MoreButton
                   style="width: 200px"
diff --git a/nuxt-app/pages/portal/[portal_name]/index.vue b/nuxt-app/pages/portal/[portal_name]/index.vue
index c5f5a745..a38cde6a 100644
--- a/nuxt-app/pages/portal/[portal_name]/index.vue
+++ b/nuxt-app/pages/portal/[portal_name]/index.vue
@@ -273,7 +273,7 @@ useHead({
             <div v-if="portal.cite" class="alert alert-light text-dde-dark p-3">
               <hr />
               <h6>Cite {{ portal.name }}</h6>
-              <p>{{ portal.cite }}</p>
+              <p v-html="portal.cite"></p>
             </div>
           </div>
         </div>
diff --git a/nuxt-app/pages/resource/[id]/index.vue b/nuxt-app/pages/resource/[id]/index.vue
index 50cbcc0b..abdb476c 100644
--- a/nuxt-app/pages/resource/[id]/index.vue
+++ b/nuxt-app/pages/resource/[id]/index.vue
@@ -10,6 +10,7 @@ const route = useRoute();
 const store = useStore();
 const id = route.params.id;
 let metadata = ref({});
+let metadata_html = ref("");
 let metadata_pure = ref({});
 let isN3C = ref(false);
 let meta_id = ref("");
@@ -59,20 +60,31 @@ function formatDate(timestamp) {
   );
 }
 
-function download() {
+function download(format) {
   var a = document.createElement("a");
-  var file = new Blob(
-    [
+  var fileContent, fileType, fileName;
+
+  if (format === "html") {
+    fileContent =
       "<sc" +
-        'ript type="application/ld+json" >' +
-        JSON.stringify(metadata, null, 2) +
-        "</scr" +
-        "ipt>",
-    ],
-    { type: "text/plain" }
-  );
+      'ript type="application/ld+json" >' +
+      JSON.stringify(metadata.value, null, 2) +
+      "</scr" +
+      "ipt>";
+    fileType = "text/plain";
+    fileName = "meta-download.txt";
+  } else if (format === "json") {
+    fileContent = JSON.stringify(metadata.value, null, 2);
+    fileType = "application/json";
+    fileName = "meta-download.json";
+  } else {
+    console.error("Unsupported format. Please use 'html' or 'json'.");
+    return;
+  }
+
+  var file = new Blob([fileContent], { type: fileType });
   a.href = URL.createObjectURL(file);
-  a.download = "meta-download";
+  a.download = fileName;
   a.click();
 }
 
@@ -87,6 +99,7 @@ function getFeatured(meta) {
 }
 
 function getMetadata(id) {
+  store.commit("setLoading", { value: true });
   id = id.replace("/", "");
   generateScriptText(id);
   meta_id.value = id;
@@ -102,7 +115,16 @@ function getMetadata(id) {
         let o = Object.assign({}, data);
         delete o["_meta"];
         delete o["_id"];
+
+        let txt =
+          "<scr" +
+          'ipt type="applicat' +
+          'ion/ld+json">' +
+          JSON.stringify(o, null, 2) +
+          "<" +
+          "/script>";
         metadata_pure.value = o;
+        metadata_html.value = txt;
       }, 200);
       useHead({
         title: "DDE | " + metadata.value.name,
@@ -361,16 +383,16 @@ getMetadata(id);
           </div>
         </div>
         <div class="alert alert-dark text-dde-dark mt-5">
-          <h5>
+          <h4>
             <b>For dataset owner:</b> Embed this structured dataset metadata on
             your website describing this dataset
             <span
               class="text-info"
-              data-tippy-content="TLDR: This makes your dataset easier to be found from multiple search engines (Google, Bing etc.)<hr>
-A longer explanation: This enhances discoverability by making your data easily searchable and accessible through web search engines like Google. The <a href='http://schema.org/' target='_blank'>schema.org</a> compatible, structured metadata in <a href='https://json-ld.org/' target='_blank'>JSON-LD</a> format is now <a target='_blank' href='https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data'>recommended by Google</a> and other search engines for better SEO (Search Engine Optimization). This capability facilitates data sharing and collaboration among researchers and developers. Additionally, it provides clear context and provenance for the datasets, ensuring users understand the source, quality, and relevance of the data."
+              data-tippy-content="<b>TLDR</b>: This makes your dataset easier to be found from multiple search engines (Google, Bing etc.)<hr>
+<b>A longer explanation</b>: This enhances discoverability by making your data easily searchable and accessible through web search engines like Google. The <a href='http://schema.org/' target='_blank'>schema.org</a> compatible, structured metadata in <a href='https://json-ld.org/' target='_blank'>JSON-LD</a> format is now <a target='_blank' href='https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data'>recommended by Google</a> and other search engines for better SEO (Search Engine Optimization). This capability facilitates data sharing and collaboration among researchers and developers. Additionally, it provides clear context and provenance for the datasets, ensuring users understand the source, quality, and relevance of the data."
               >[why?]</span
             >
-          </h5>
+          </h4>
           <div class="p-3">
             <h6>Dynamic Embedding</h6>
             <hr />
@@ -382,7 +404,10 @@ A longer explanation: This enhances discoverability by making your data easily s
               >
             </p>
             <p class="text-dde-mid bold">
-              <span>Changes to metadata will be applied automatically.</span>
+              <span
+                >Changes made to this metadata via this website will be applied
+                to this script automatically.</span
+              >
             </p>
             <span class="d-block text-muted text-center">
               <b>CLICK THE INPUT FIELD TO COPY</b>
@@ -402,23 +427,22 @@ A longer explanation: This enhances discoverability by making your data easily s
             <p>
               <span
                 >In your website's code anywhere before the closing
-                <code>&lt;/head&gt;</code> tag, paste the code below inside of a
-                script tag like this:
-                <code
-                  >&lt;script type="application/ld+json" &gt; ...your
-                  metadata...&lt;/script&gt;</code
-                >.</span
+                <code>&lt;/head&gt;</code> tag, copy and paste the HTML code
+                below.</span
               >
             </p>
             <p class="text-dde-mid bold">
-              <span>Changes to metadata need to be updated manually.</span>
+              <span
+                >If you copy/paste this metadata manually all future changes to
+                it will need to be applied manually as well.</span
+              >
             </p>
             <div class="alert-info">
               <button
                 @click="expand = !expand"
                 class="btn d-block themeButton text-light w-100"
               >
-                {{ expand ? "Close" : "Inspect Metadata" }}
+                {{ expand ? "Close" : "View Metadata" }}
               </button>
               <div v-if="expand">
                 <div
@@ -426,20 +450,23 @@ A longer explanation: This enhances discoverability by making your data easily s
                 >
                   <a
                     class="btn btn-sm themeButton text-light mx-3"
-                    @click="download()"
-                    >Download Metadata</a
+                    @click="download('html')"
+                    >Download HTML</a
+                  >
+                  <a
+                    class="btn btn-sm themeButton text-light mx-3"
+                    @click="download('json')"
+                    >Download Metadata Alone</a
                   >
                   <a
                     class="btn btn-sm themeButton text-light mx-3"
                     @click="copyJsonToClipboard()"
-                    >Copy Metadata</a
+                    >Copy Metadata Alone</a
                   >
                 </div>
                 <template v-if="ready">
                   <div style="max-height: 600px; overflow-y: scroll">
-                    <CodeEditorWithProp
-                      :item="metadata_pure"
-                    ></CodeEditorWithProp>
+                    <CodeEditorHTML :item="metadata_html"></CodeEditorHTML>
                   </div>
                 </template>
               </div>
diff --git a/nuxt-app/store/index.js b/nuxt-app/store/index.js
index 9dc7f7d2..b709d4e8 100644
--- a/nuxt-app/store/index.js
+++ b/nuxt-app/store/index.js
@@ -89,7 +89,7 @@ export default createStore({
               });
           } else {
             let html =
-              '<table class="table table-sm table-borderless m-0 text-light mainBackDark">';
+              '<table class="table table-sm table-borderless m-0 text-light">';
             try {
               if (instance.reference.dataset.tippyContent.includes("{")) {
                 let json = JSON.parse(instance.reference.dataset.tippyContent);
diff --git a/nuxt-app/store/modules/portals.js b/nuxt-app/store/modules/portals.js
index 884cc646..5c779629 100644
--- a/nuxt-app/store/modules/portals.js
+++ b/nuxt-app/store/modules/portals.js
@@ -40,7 +40,8 @@ export const portals = {
         ],
         datasets: "/dataset?template=/guide/outbreak/dataset",
         colors: [{ hex: "#D13B62" }, { hex: "#0A253D" }],
-        cite: "Tsueng G, Mullen JL, Alkuzweny M, Cano M, Rush B, Haag E, Lin J, Welzel DJ, Zhou X, Qian Z, Latif AA, Hufbauer E, Zeller M, Andersen KG, Wu C, Su AI, Gangavarapu K, Hughes LD. Outbreak.info Research Library: a standardized, searchable platform to discover and explore COVID-19 resources. Nat Methods. 2023 Apr;20(4):536-540. doi: 10.1038/s41592-023-01770-w. Epub 2023 Feb 23. PMID: 36823331; PMCID: PMC10393269.",
+        cite: `Tsueng G, Mullen JL, Alkuzweny M, Cano M, Rush B, Haag E, Lin J, Welzel DJ, Zhou X, Qian Z, Latif AA, Hufbauer E, Zeller M, Andersen KG, Wu C, Su AI, Gangavarapu K, Hughes LD. Outbreak.info Research Library: a standardized, searchable platform to discover and explore COVID-19 resources. 
+        Nat Methods. 2023 Apr;20(4):536-540. doi: 10.1038/s41592-023-01770-w. Epub 2023 Feb 23. PMID: <a href="https://pubmed.ncbi.nlm.nih.gov/36823331" target="_blank">36823331</a>; PMCID: <a href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC10393269" target="_blank">PMC10393269</a>.`,
       },
       {
         name: "NIAID Data Ecosystem",
@@ -118,7 +119,8 @@ export const portals = {
             link: "https://www.biorxiv.org/content/10.1101/2022.10.10.511492v1",
           },
         ],
-        cite: "Tsueng G, Cano MAA, Bento J, Czech C, Kang M, Pache L, Rasmussen LV, Savidge TC, Starren J, Wu Q, Xin J, Yeaman MR, Zhou X, Su AI, Wu C, Brown L, Shabman RS, Hughes LD; NIAID Systems Biology Data Dissemination Working Group. Developing a standardized but extendable framework to increase the findability of infectious disease datasets. Sci Data. 2023 Feb 23;10(1):99. doi: 10.1038/s41597-023-01968-9. PMID: 36823157; PMCID: PMC9950378.",
+        cite: `Tsueng G, Cano MAA, Bento J, Czech C, Kang M, Pache L, Rasmussen LV, Savidge TC, Starren J, Wu Q, Xin J, Yeaman MR, Zhou X, Su AI, Wu C, Brown L, Shabman RS, Hughes LD; NIAID Systems Biology Data Dissemination Working Group. Developing a standardized but extendable framework to increase the findability of infectious disease datasets. Sci Data. 
+        2023 Feb 23;10(1):99. doi: 10.1038/s41597-023-01968-9. PMID: <a href="https://pubmed.ncbi.nlm.nih.gov/36823157" target="_blank">36823157</a>; PMCID: <a href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC9950378" target="_blank">PMC9950378</a>.`,
       },
       {
         name: "NIAID CREID Research Network Portal",