diff --git a/.github/ISSUE_TEMPLATE/data-portal-request.md b/.github/ISSUE_TEMPLATE/data-portal-request.md
index 4dd79811..492c68de 100644
--- a/.github/ISSUE_TEMPLATE/data-portal-request.md
+++ b/.github/ISSUE_TEMPLATE/data-portal-request.md
@@ -1,3 +1,12 @@
+---
+name: Data Portal Application
+about: Request to add a portal to your project on the DDE.
+title: Data Portal Application
+labels: feature
+assignees: marcodarko
+
+---
+
 <img src="https://discovery.biothings.io/dde-logo-o.png" alt="dde" width="100"/>
 
 ### Data Discovery Engine | Data Portal Application
diff --git a/nuxt-app/assets/css/bootstrap.css b/nuxt-app/assets/css/bootstrap.css
index b6fce3e9..203e5934 100644
--- a/nuxt-app/assets/css/bootstrap.css
+++ b/nuxt-app/assets/css/bootstrap.css
@@ -328,7 +328,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Poppins" !important;
+  font-family: "Poppins" sans-serif !important;
   margin-bottom: 0.5rem;
   font-weight: 500;
   line-height: 1.2;
diff --git a/nuxt-app/assets/css/styles.css b/nuxt-app/assets/css/styles.css
index ed19c492..ded60ab8 100644
--- a/nuxt-app/assets/css/styles.css
+++ b/nuxt-app/assets/css/styles.css
@@ -1424,13 +1424,13 @@ pre code {
   vertical-align: middle;
 }
 .table-striped-main tbody tr:nth-of-type(odd) {
-  background-color: rgba(81, 187, 187, 0.2);
+  background-color: rgba(118, 100, 219, 0.2);
 }
 .table-striped-main tbody tr:nth-of-type(even) {
   background-color: rgba(187, 187, 187, 0.1);
 }
 .table-striped-sec tbody tr:nth-of-type(odd) {
-  background-color: rgba(169, 82, 187, 0.1);
+  background-color: rgba(112, 64, 189, 0.1);
 }
 .table-striped-sec tbody tr:nth-of-type(even) {
   background-color: rgba(187, 187, 187, 0.1);
diff --git a/nuxt-app/components/QueryBox.vue b/nuxt-app/components/QueryBox.vue
index fbf905c1..c81aba88 100644
--- a/nuxt-app/components/QueryBox.vue
+++ b/nuxt-app/components/QueryBox.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="p-3 mb-2 alert alert-light">
+  <div class="p-3 mb-2 alert alert-light shadow">
     <div v-if="q && q.name">
-      <a class="d-inline text-info" :href="'/ns/' + q.name.split(':')[0]">
+      <a class="d-inline text-primary" :href="'/ns/' + q.name.split(':')[0]">
         <h3
           class="bold d-inline"
           :id="q.name"
@@ -43,22 +43,20 @@
       <ul style="list-style: none">
         <li v-for="path in getPaths(q)">
           <span v-for="(item, index) in path">
-            <!-- <a
-              :class="[index !== path.length - 1 ? 'text-dark' : textColor]"
-              class="font-weight-bold"
-              :href="getBreadcrumbLink(item)"
-              v-text="item"
-            ></a> -->
             <span
-              :class="[index !== path.length - 1 ? 'text-dark' : textColor]"
-              class="font-weight-bold pointer"
+              :class="[
+                index !== path.length - 1
+                  ? 'text-dark'
+                  : 'text-dde-mid font-weight-bold',
+              ]"
+              class="pointer"
               @click="goTo(item)"
               v-text="item"
             ></span>
             <span v-if="index !== path.length - 1"
               >&nbsp;<font-awesome-icon
                 icon="fas fa-caret-right"
-                :class="textColor"
+                class="text-dde-mid"
               />&nbsp;</span
             >
           </span>
@@ -93,52 +91,68 @@
       </template>
     </template>
     <div v-if="q.properties && !validationView">
-      <div class="resultsTabFull mt-3 p-3 text-light" :class="backColor">
+      <div
+        class="resultsTabFull mt-3 p-3 text-light text-left"
+        :class="backColor"
+      >
         <h5 class="d-inline">
-          <span v-text="q.label + ' has '"></span>
-          <span class="badge badge-light" :class="textColor">
-            <span
+          <b class="mr-2" v-text="q.label"></b>
+          <span class="text-warning">
+            (<small
               v-if="q && q.properties"
               v-text="q.properties.length + ' properties'"
             >
-            </span>
-            <span v-else> </span>
+            </small
+            >)
           </span>
         </h5>
         <button
-          v-if="q && q.properties.length"
-          @click="toggleShowAll()"
+          @click="hide = !hide"
           style="border: 2px solid white"
-          class="btn text-light ml-5"
-          :class="backColor"
-          v-text="showAll ? 'Hide All' : 'Show All'"
+          class="btn btn-sm text-light ml-5 themeButton"
+          v-text="!hide ? 'Hide All' : 'Show All'"
         ></button>
+        <button
+          class="btn btn-sm themeButton text-light float-right"
+          @click="exportToCSV(q?.properties)"
+        >
+          Export to CSV
+        </button>
       </div>
       <table
-        v-show="showAll"
-        class="table mb-2"
-        :class="!parent ? 'table-striped-sec' : 'table-striped-main'"
+        v-show="!hide"
+        class="table mb-2 table-sm"
+        :class="!parent ? 'table-striped table-light' : 'table-striped-main'"
       >
+        <thead class="thead-dark">
+          <tr>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Expected Type</th>
+          </tr>
+        </thead>
         <tbody>
-          <tr v-if="q && q.properties" v-for="(item, i) in q.properties">
+          <tr
+            v-if="q && q.properties"
+            v-for="(item, i) in reorderByLabel(q.properties)"
+          >
             <td>
               <a class="font-weight-bold" :href="'./' + item.label">
                 <span v-html="item.label"></span>
               </a>
-              <p>
-                <span
-                  class="text-dark"
-                  v-html="item.description || 'No description provided'"
-                ></span>
-              </p>
             </td>
+            <td
+              class="text-dark"
+              v-html="item.description || 'No description provided'"
+            ></td>
             <td>
-              <small class="mainTextDark bold">Expected Type: </small>
               <template v-for="(type, i) in item.range">
-                <a v-for="link in getLink(type)" :href="link" :key="link">
-                  <small>
-                    <span v-html="type"></span>
-                  </small>
+                <a
+                  v-for="link in getLink(type)"
+                  :href="link"
+                  :key="link"
+                  v-text="type"
+                >
                 </a>
                 <span v-if="i !== item.range.length - 1">, </span>
               </template>
@@ -148,8 +162,8 @@
       </table>
     </div>
     <div
-      v-if="!q.properties && !validationView"
-      class="jumbotron d-flex justify-content-center align-items-center"
+      v-if="!q.properties && !validationView && !q.domain"
+      class="jumbotron alert-primary d-flex justify-content-center align-items-center"
     >
       <div>
         <p class="m-4">
@@ -161,13 +175,21 @@
     <div v-if="validationView && q.validation">
       <ValidationBox :validation="q.validation"></ValidationBox>
     </div>
+    <div
+      v-if="validationView && !q.validation && !q.domain"
+      class="jumbotron alert-primary d-flex justify-content-center align-items-center"
+    >
+      <div>
+        <p class="m-4">This class does not define any validation rules.</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import ValidationBox from "./ValidationBox.vue";
 import { mapGetters, mapActions } from "vuex";
-import Notify from "simple-notify";
+import Papa from "papaparse";
 
 export default {
   name: "QueryBox",
@@ -179,11 +201,30 @@ export default {
       textColor: "",
       backColor: "",
       properties: [],
+      hide: false,
     };
   },
   props: ["q", "userSchema", "parent"],
   methods: {
     ...mapActions(["toggleShowAll"]),
+    exportToCSV(data) {
+      let csv = Papa.unparse(data);
+      // Create a blob from the CSV string
+      let blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+
+      // Create a temporary link element to trigger the download
+      let link = document.createElement("a");
+      if (link.download !== undefined) {
+        // Check if download attribute is supported
+        let url = URL.createObjectURL(blob);
+        link.setAttribute("href", url);
+        link.setAttribute("download", this.q.label + ".csv"); // Set the desired file name
+        link.style.visibility = "hidden";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link); // Clean up by removing the link
+      }
+    },
     getPaths(classInfo) {
       // console.log('getting all possible paths...')
       let res = [];
@@ -258,34 +299,12 @@ export default {
     },
     goTo(string) {
       let res = "";
-      let arr = [];
       if (string.includes(":")) {
-        arr = string.split(":");
-        if (arr[0] == "schema") {
-          new Notify({
-            status: "warning",
-            title: "Navigation Unavailable",
-            text: "This class cannot be navigated to directly. Taking you to its homepage.",
-            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",
-          });
-          this.$router.push("/ns/schema");
-          return;
-        }
-        res = `/ns/${arr[0]}/${arr[arr.length - 1]}`;
+        res = `/ns/${string.split(":")[0]}/${string}`;
       } else {
-        res = string;
+        res = "/ns/" + string;
       }
+      console.log("Going to ", res);
       this.$router.push(res);
     },
     getLink(qName) {
@@ -301,18 +320,39 @@ export default {
         }
       }
     },
+    reorderByLabel(objects) {
+      return objects.sort((a, b) => {
+        // Ensure that both objects have a 'label' property before comparing
+        if (a.label && b.label) {
+          return a.label.localeCompare(b.label);
+        }
+        return 0;
+      });
+    },
   },
   mounted: function () {
     if (this.parent) {
-      this.textColor = "mainTextLight";
-      this.backColor = "mainBackLight";
+      this.textColor = "text-dde-mid";
+      this.backColor = "bg-dde-mid";
     } else {
-      this.textColor = "mainTextDark";
-      this.backColor = "mainBackDark";
+      this.textColor = "text-dde-dark";
+      this.backColor = "bg-dde-dark";
     }
   },
   computed: {
     ...mapGetters(["validationView", "showAll"]),
   },
+  watch: {
+    parent: {
+      handler: function (v) {
+        if (!v) {
+          this.hide = false;
+        } else {
+          this.hide = true;
+        }
+      },
+      immediate: true,
+    },
+  },
 };
 </script>
diff --git a/nuxt-app/components/SchemaRegistryItem.vue b/nuxt-app/components/SchemaRegistryItem.vue
index 19d1afe4..98f35c95 100644
--- a/nuxt-app/components/SchemaRegistryItem.vue
+++ b/nuxt-app/components/SchemaRegistryItem.vue
@@ -136,7 +136,7 @@ export default {
       } else {
         // View and send analytics
         if (item && item.namespace && item.name) {
-          this.$router.push("/view/" + item.namespace + "/" + item.name);
+          this.$router.push("/ns/" + item.namespace + "/" + item.name);
         } else {
           this.$swal.fire("Oops!", "Action not available for this item");
         }
diff --git a/nuxt-app/pages/best-practices/index.vue b/nuxt-app/pages/best-practices/index.vue
index a5009fa3..604338f3 100644
--- a/nuxt-app/pages/best-practices/index.vue
+++ b/nuxt-app/pages/best-practices/index.vue
@@ -178,7 +178,7 @@
                   rel="nonreferrer"
                   >CD2H <font-awesome-icon icon="fas fa-external-link-alt" /></a
                 >) biomedical dataset metadata based on this
-                <nuxt-link to="/view/biomedical/" rel="nonreferrer"
+                <nuxt-link to="/ns/biomedical/" rel="nonreferrer"
                   >schema <font-awesome-icon icon="fas fa-external-link-alt"
                 /></nuxt-link>
                 structure.
@@ -240,7 +240,7 @@
                       <small>Schema</small>
                     </td>
                     <td>
-                      <nuxt-link to="/view/biomedical"
+                      <nuxt-link to="/ns/biomedical"
                         ><small class="badge badge-light"
                           >Dataset</small
                         ></nuxt-link
@@ -270,7 +270,7 @@
                   rel="nonreferrer"
                   >N3C <font-awesome-icon icon="fas fa-external-link-alt" /></a
                 >) dataset metadata based on this
-                <nuxt-link to="/view/n3c/" rel="nonreferrer"
+                <nuxt-link to="/ns/n3c/" rel="nonreferrer"
                   >schema <font-awesome-icon icon="fas fa-external-link-alt"
                 /></nuxt-link>
                 structure.
@@ -327,7 +327,7 @@
                       <small>Schema</small>
                     </td>
                     <td>
-                      <nuxt-link to="/view/n3c"
+                      <nuxt-link to="/ns/n3c"
                         ><small class="badge badge-light"
                           >Dataset</small
                         ></nuxt-link
@@ -359,7 +359,7 @@
                   >Outbreak.info
                   <font-awesome-icon icon="fas fa-external-link-alt" /></a
                 >) COVID-19 epidimiology dataset metadata based on this
-                <nuxt-link to="/view/outbreak/" rel="nonreferrer"
+                <nuxt-link to="/ns/outbreak/" rel="nonreferrer"
                   >schema <font-awesome-icon icon="fas fa-external-link-alt"
                 /></nuxt-link>
                 structure.
@@ -416,7 +416,7 @@
                       <small>Schema</small>
                     </td>
                     <td>
-                      <nuxt-link to="/view/outbreak"
+                      <nuxt-link to="/ns/outbreak"
                         ><small class="badge badge-light"
                           >Dataset</small
                         ></nuxt-link
@@ -456,7 +456,7 @@
                   >NIAID Systems Biology
                   <font-awesome-icon icon="fas fa-external-link-alt" /></a
                 >) dataset metadata based on this
-                <nuxt-link to="/view/niaid/" rel="nonreferrer"
+                <nuxt-link to="/ns/niaid/" rel="nonreferrer"
                   >schema <font-awesome-icon icon="fas fa-external-link-alt"
                 /></nuxt-link>
                 structure.
@@ -516,7 +516,7 @@
                       <small>Schema</small>
                     </td>
                     <td>
-                      <nuxt-link to="/view/niaid"
+                      <nuxt-link to="/ns/niaid"
                         ><small class="badge badge-light"
                           >Dataset</small
                         ></nuxt-link
diff --git a/nuxt-app/pages/guide/Guide.vue b/nuxt-app/pages/guide/Guide.vue
index 95b3f528..48ce90b1 100644
--- a/nuxt-app/pages/guide/Guide.vue
+++ b/nuxt-app/pages/guide/Guide.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     id="guide"
-    class="container-fluid pt-5 m-auto col-sm-12 col-md-10 col-lg-10 col-xl-8"
+    class="pt-5"
+    :class="[!expandedWide ? 'container' : 'container-fluid px-3']"
     style="min-height: 90vh"
     v-cloak
   >
@@ -248,6 +249,31 @@
                 :class="[valid ? 'bg-success' : 'bg-danger']"
               ></span>
             </div>
+            <button
+              type="button"
+              class="btn btn-sm btn-info ml-4"
+              data-tippy-content="Stretch/Shrink UI Horizontally"
+              @click="toggleUI()"
+            >
+              <template v-if="!expandedWide">
+                <font-awesome-icon
+                  icon="fas fa-chevron-left"
+                  class="mr-1"
+                ></font-awesome-icon>
+                <font-awesome-icon
+                  icon="fas fa-chevron-right"
+                ></font-awesome-icon>
+              </template>
+              <template v-if="expandedWide">
+                <font-awesome-icon
+                  icon="fas fa-chevron-right"
+                  class="mr-1"
+                ></font-awesome-icon>
+                <font-awesome-icon
+                  icon="fas fa-chevron-left"
+                ></font-awesome-icon>
+              </template>
+            </button>
           </div>
         </div>
 
@@ -599,6 +625,7 @@ export default {
       fieldsleftRegistration: "fieldsLeft",
       userInfo: "userInfo",
       loading: "loading",
+      expandedWide: "expandUI",
     }),
   },
   watch: {
@@ -613,6 +640,9 @@ export default {
     startBulk() {
       this.$store.commit("toggleBeginBulkRegistration");
     },
+    toggleUI() {
+      this.$store.commit("toggleExpandUI");
+    },
     checkOverriddenID(id) {
       let self = this;
       axios
diff --git a/nuxt-app/pages/markup-generator/index.vue b/nuxt-app/pages/markup-generator/index.vue
index 3ead4b85..b6db96cb 100644
--- a/nuxt-app/pages/markup-generator/index.vue
+++ b/nuxt-app/pages/markup-generator/index.vue
@@ -16,6 +16,7 @@ let route = useRoute();
 
 let schema_namespaces = computed(() => store.getters.validationSchemaOptions);
 let validation = computed(() => store.getters.getValidation);
+let expandedWide = computed(() => store.getters.expandUI);
 let json = ref({});
 let searchTerm = ref("");
 
@@ -25,6 +26,10 @@ function updateEditor() {
   json.value = store.getters.getPreview;
 }
 
+function toggleUI() {
+  store.commit("toggleExpandUI");
+}
+
 useHead({
   title: "DDE | Markup Generator",
   meta: [
@@ -137,10 +142,13 @@ onMounted(() => {
 </script>
 <template>
   <div class="bg-light min-100">
-    <div class="container text-left bg-light">
+    <div
+      class="text-left bg-light"
+      :class="[!expandedWide ? 'container' : 'container-fluid px-3']"
+    >
       <Title :title="searchTerm || 'Markup Generator'"></Title>
       <div class="m-0 row p-1 bg-dde-mid">
-        <div class="col-sm-12 bg-dde-dark p-2">
+        <div class="col-sm-12 bg-dde-dark p-2 d-flex">
           <form @submit.prevent="handleSubmit()" class="d-flex col-sm-5">
             <input
               type="text"
@@ -174,6 +182,29 @@ onMounted(() => {
               Clear
             </button>
           </form>
+          <button
+            type="button"
+            data-tippy-content="Stretch/Shrink UI Horizontally"
+            class="btn btn-sm btn-info"
+            @click="toggleUI()"
+          >
+            <template v-if="!expandedWide">
+              <font-awesome-icon
+                icon="fas fa-chevron-left"
+                class="mr-1"
+              ></font-awesome-icon>
+              <font-awesome-icon
+                icon="fas fa-chevron-right"
+              ></font-awesome-icon>
+            </template>
+            <template v-if="expandedWide">
+              <font-awesome-icon
+                icon="fas fa-chevron-right"
+                class="mr-1"
+              ></font-awesome-icon>
+              <font-awesome-icon icon="fas fa-chevron-left"></font-awesome-icon>
+            </template>
+          </button>
         </div>
         <div
           class="col-sm-12 col-md-7 p-0"
diff --git a/nuxt-app/pages/ns/[namespace]/[[query]].vue b/nuxt-app/pages/ns/[namespace]/[[query]].vue
index bc9bf2e4..5f5eb57a 100644
--- a/nuxt-app/pages/ns/[namespace]/[[query]].vue
+++ b/nuxt-app/pages/ns/[namespace]/[[query]].vue
@@ -82,14 +82,14 @@
                 class="text-light"
                 v-text="namespace"
               ></h1>
-              <small class="text-info">(Temporary Namespace)</small>
+              <b class="text-warning">(Temporary Namespace)</b>
             </div>
           </template>
           <div class="row" v-show="!namespaceRegistered">
             <div class="col-sm-12 text-center p-3">
               <button
                 role="button"
-                class="btn btn-sm btn-success"
+                class="btn btn-lg btn-success"
                 @click="openRegistration()"
               >
                 <font-awesome-icon icon="fas fa-registered" /> Register This
@@ -129,7 +129,7 @@
               Classes
             </li>
             <li v-for="item in searchResults">
-              <nuxt-link :to="'/' + item['label']"
+              <nuxt-link :to="$route.fullPath + '/' + item['label']"
                 ><small v-text="item['label']"></small
               ></nuxt-link>
             </li>
@@ -145,7 +145,7 @@
               Properties
             </li>
             <li v-for="item in searchResultsProps">
-              <nuxt-link :to="'/' + item['label']"
+              <nuxt-link :to="$route.fullPath + '/' + item['label']"
                 ><small v-text="item['label']"></small
               ></nuxt-link>
             </li>
@@ -162,8 +162,9 @@
           >
             <h3 class="text-muted d-inline mr-2 text-dde-dark">Definitions</h3>
             <a
+              v-if="!$route.fullPath.includes('ns/schema')"
               role="button"
-              class="btn btn-sm mainBackDark pointer ml-2"
+              class="btn btn-sm themeButton pointer ml-2"
               @click="flipView()"
               >Change View <font-awesome-icon icon="fas fa-retweet"
             /></a>
@@ -263,7 +264,7 @@
                         <small v-html="def['description']"></small>
                       </p>
                     </div>
-                    <div>
+                    <div v-if="namespaceRegistered">
                       <font-awesome-icon
                         icon="fas fa-code-branch"
                         class="pointer tip text-light btn themeButton p-1"
@@ -287,8 +288,9 @@
               Definition Hierarchy
             </h3>
             <a
+              v-if="!$route.fullPath.includes('ns/schema')"
               role="button"
-              class="btn btn-sm mainBackDark pointer ml-2 text-light"
+              class="btn btn-sm themeButton pointer ml-2 text-light"
               @click="flipView()"
               >Change View <font-awesome-icon icon="fas fa-retweet"
             /></a>
@@ -441,7 +443,7 @@
     </div>
     <!-- QUERY MODE -->
     <div id="mainCont">
-      <div class="container mt-5 pt-3" v-if="query">
+      <div class="container mt-5 pt-5" v-if="query">
         <div
           class="w-100 p-2 bg-dde-dark d-flex align-items-center justify-content-around p-3"
         >
@@ -459,21 +461,6 @@
               class="text-light fa-stack-1x"
             />
           </span>
-          <div class="d-flex justify-content-around align-items-center">
-            <template v-if="!validationView">
-              <small class="text-center text-light mr-2"
-                >Expand Properties</small
-              >
-              <input
-                id="toggle"
-                class="form-control slider text-light m-auto tip"
-                @change="showAll()"
-                data-tippy-content="Expand or contract all property lists"
-                type="checkbox"
-                checked
-              />
-            </template>
-          </div>
           <div class="d-flex justify-content-around align-items-center">
             <small class="text-center text-light mr-2"
               ><img src="@/assets/img/cube.svg" width="25" /> Validation
diff --git a/nuxt-app/pages/registry/index.vue b/nuxt-app/pages/registry/index.vue
index f0aa91cf..ec125cb8 100644
--- a/nuxt-app/pages/registry/index.vue
+++ b/nuxt-app/pages/registry/index.vue
@@ -28,15 +28,9 @@
               <div class="alert alert-light jumbotron">
                 <h2 class="text-dde-dark">Classes</h2>
                 <p>
-                  Visualize (<font-awesome-icon
-                    icon="fas fa-eye"
-                    class="text-info"
-                  />), extend (<font-awesome-icon
-                    icon="fas fa-code-branch"
-                    class="mainTextLight"
-                  />) and compare (<font-awesome-icon
+                  View, extend and compare (<font-awesome-icon
                     icon="fas fa-not-equal"
-                    class="mainTextDark"
+                    class="text-primary"
                   />) available schema classes.
                 </p>
               </div>
@@ -104,7 +98,7 @@
                       >
                         <font-awesome-icon
                           icon="fas fa-circle"
-                          class="text-muted fa-stack-2x"
+                          class="text-primary fa-stack-2x"
                         />
                         <font-awesome-icon
                           icon="fas fa-not-equal"
@@ -296,7 +290,7 @@
                             </td>
                             <td>
                               <router-link
-                                :to="{ path: '/view/' + def.namespace }"
+                                :to="{ path: '/ns/' + def.namespace }"
                               >
                                 {{ def.namespace }}
                                 <font-awesome-icon
diff --git a/nuxt-app/pages/resource/[id]/index.vue b/nuxt-app/pages/resource/[id]/index.vue
index abdb476c..d913710e 100644
--- a/nuxt-app/pages/resource/[id]/index.vue
+++ b/nuxt-app/pages/resource/[id]/index.vue
@@ -67,9 +67,9 @@ function download(format) {
   if (format === "html") {
     fileContent =
       "<sc" +
-      'ript type="application/ld+json" >' +
+      'ript type="application/ld+json" >\n' +
       JSON.stringify(metadata.value, null, 2) +
-      "</scr" +
+      "\n</scr" +
       "ipt>";
     fileType = "text/plain";
     fileName = "meta-download.txt";
@@ -119,9 +119,9 @@ function getMetadata(id) {
         let txt =
           "<scr" +
           'ipt type="applicat' +
-          'ion/ld+json">' +
+          'ion/ld+json">\n' +
           JSON.stringify(o, null, 2) +
-          "<" +
+          "\n<" +
           "/script>";
         metadata_pure.value = o;
         metadata_html.value = txt;
@@ -227,10 +227,9 @@ function copyScript(id) {
   });
 }
 
-function copyJsonToClipboard() {
-  const jsonString = JSON.stringify(metadata_pure.value, null, 2); // Convert JSON object to a pretty-printed string
+function copyHTML() {
   navigator.clipboard
-    .writeText(jsonString)
+    .writeText(metadata_html.value)
     .then(() => {
       new Notify({
         status: "success",
@@ -240,7 +239,7 @@ function copyJsonToClipboard() {
       });
     })
     .catch((err) => {
-      console.error("Error copying JSON to clipboard: ", err);
+      console.error("Error copying HTML to clipboard: ", err);
     });
 }
 
@@ -286,7 +285,7 @@ const schemaLink = computed(() => {
     metadata.value["@type"].includes(":")
   ) {
     let parts = metadata.value["@type"].split(":");
-    return "/view/" + parts[0] + "/" + parts[1];
+    return "/ns/" + parts[0] + "/" + parts[1];
   }
   return false;
 });
@@ -451,17 +450,12 @@ getMetadata(id);
                   <a
                     class="btn btn-sm themeButton text-light mx-3"
                     @click="download('html')"
-                    >Download HTML</a
+                    >Download</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 Alone</a
+                    @click="copyHTML()"
+                    >Copy</a
                   >
                 </div>
                 <template v-if="ready">
diff --git a/nuxt-app/pages/validator/index.vue b/nuxt-app/pages/validator/index.vue
index 296286f9..70413e57 100644
--- a/nuxt-app/pages/validator/index.vue
+++ b/nuxt-app/pages/validator/index.vue
@@ -4,7 +4,6 @@ import { reactive, computed, ref, onMounted } from "vue";
 import { useStore } from "vuex";
 import Notify from "simple-notify";
 import { useRouter, useRoute } from "vue-router";
-import validator_img from "../../assets/img/validator.svg";
 
 const { $swal } = useNuxtApp();
 const store = useStore();
@@ -14,13 +13,13 @@ const runtimeConfig = useRuntimeConfig();
 let errors = ref(false);
 let valid = ref(false);
 let expanded = ref(false);
-let expandedWide = ref(false);
 let router = useRouter();
 let route = useRoute();
 
 let schema_namespaces = computed(() => store.getters.validationSchemaOptions);
 let userInfo = computed(() => store.getters.userInfo);
 let metaToValidate = computed(() => store.getters.getValidationMetadata);
+let expandedWide = computed(() => store.getters.expandUI);
 
 let searchTerm = ref("");
 
@@ -32,6 +31,10 @@ function handleSubmit() {
   getClassValidation(searchTerm.value);
 }
 
+function toggleUI() {
+  store.commit("toggleExpandUI");
+}
+
 useHead({
   title: "DDE | Metadata Validator",
   meta: [
@@ -335,6 +338,7 @@ onMounted(() => {
           ></font-awesome-icon>
           <button
             class="btn btn-sm rounded btn-info mr-2"
+            data-tippy-content="Open/Close"
             @click="expanded = !expanded"
           >
             <font-awesome-icon
@@ -349,7 +353,8 @@ onMounted(() => {
           <button
             type="button"
             class="btn btn-sm btn-info"
-            @click="expandedWide = !expandedWide"
+            data-tippy-content="Stretch/Shrink UI Horizontally"
+            @click="toggleUI()"
           >
             <template v-if="!expandedWide">
               <font-awesome-icon
diff --git a/nuxt-app/store/index.js b/nuxt-app/store/index.js
index b709d4e8..23c9ae10 100644
--- a/nuxt-app/store/index.js
+++ b/nuxt-app/store/index.js
@@ -37,16 +37,23 @@ export default createStore({
   },
   state: () => ({
     loading: false,
+    expandUI: false,
   }),
   mutations: {
     setLoading(state, payload) {
       state.loading = payload.value;
     },
+    toggleExpandUI(state) {
+      state.expandUI = !state.expandUI;
+    },
   },
   getters: {
     loading: (state) => {
       return state.loading;
     },
+    expandUI: (state) => {
+      return state.expandUI;
+    },
   },
   actions: {
     setUpTips() {
diff --git a/nuxt-app/store/modules/editor.js b/nuxt-app/store/modules/editor.js
index dbf1f18e..d35abcdd 100644
--- a/nuxt-app/store/modules/editor.js
+++ b/nuxt-app/store/modules/editor.js
@@ -168,7 +168,7 @@ export const editor = {
     savePrefix(state, payload) {
       state.prefix = payload["prefix"];
       state.finalschema["@context"][state.prefix] =
-        "https://discovery.biothings.io/view/" + state.prefix + "/";
+        "https://discovery.biothings.io/ns/" + state.prefix + "/";
     },
     saveParent(state, payload) {
       let parent = payload["parent"];
@@ -705,7 +705,7 @@ export const editor = {
       //check if bioschemas is mentioned if so add bioschemas to context
       if (JSON.stringify(state.finalschema).includes("bioschemas")) {
         state.finalschema["@context"]["bioschemas"] =
-          "https://discovery.biothings.io/view/bioschemas/";
+          "https://discovery.biothings.io/ns/bioschemas/";
       }
     },
   },
diff --git a/nuxt-app/store/modules/faq.js b/nuxt-app/store/modules/faq.js
index 757d4a06..90e75789 100644
--- a/nuxt-app/store/modules/faq.js
+++ b/nuxt-app/store/modules/faq.js
@@ -144,7 +144,7 @@ export const faq = {
                                 If you do not need to extend a schema and would like to use it as is, you can download it by clicking the <b>source</b> link in that schema's home page.
                                 </p>
                                 <p>
-                                For example, here is the homepage of an extended Dataset schema you may want to re-use: <a target="_blank" href="/view/outbreak">https://discovery.biothings.io/view/outbreak</a>.
+                                For example, here is the homepage of an extended Dataset schema you may want to re-use: <a target="_blank" href="/ns/outbreak">https://discovery.biothings.io/ns/outbreak</a>.
                                 </p>`,
             },
             {
@@ -196,7 +196,7 @@ export const faq = {
               answer: `<p>
                                 During the process of extending an existing schema via the <a href="/schema-playground">Schema Playground</a>
                                 you are asked to choose a short name for new Class/property definitions. This name is also used to suggest the namespace registered with us when you visualize then register your schema.
-                                The namespace will be the new homepage for your schema. E.g. <span class="text-info">http://discovery.biothings.io/view/<b>&lt;namespace&gt;</b></span>.
+                                The namespace will be the new homepage for your schema. E.g. <span class="text-info">http://discovery.biothings.io/ns/<b>&lt;namespace&gt;</b></span>.
                                 </p>
                                 <p class="alert alert-secondary">
                                 <small>Your namespace must be unique and it can only contain lower-case web-safe characters.</small>
diff --git a/nuxt-app/store/modules/portals.js b/nuxt-app/store/modules/portals.js
index 5c779629..d226cc6e 100644
--- a/nuxt-app/store/modules/portals.js
+++ b/nuxt-app/store/modules/portals.js
@@ -28,7 +28,7 @@ export const portals = {
         portalicon: outbreak_logo,
         api: "https://api.outbreak.info/",
         site: "https://outbreak.info/",
-        schema: "/view/outbreak",
+        schema: "/ns/outbreak",
         showCoverage: true,
         coverage: ["Dataset"],
         guides: [
@@ -54,7 +54,7 @@ export const portals = {
         image: nde,
         portalicon: nde,
         site: "https://data.niaid.nih.gov/portal",
-        schema: "/view/nde",
+        schema: "/ns/nde",
         showCoverage: false,
         coverage: ["Dataset", "ResourceCatalog"],
         guides: [
@@ -70,7 +70,7 @@ export const portals = {
           },
         ],
         datasets: "/dataset?template=nde:dataset",
-        colors: [{ hex: "#103b56" }, { hex: "#3684af" }],
+        colors: [{ hex: "#3684af" }, { hex: "#103b56" }],
         // publications: [
         //   // {
         //   //   name: "Developing a standardized but extendable framework to increase the findability of infectious disease datasets",
@@ -96,7 +96,7 @@ export const portals = {
         image: niaidIcon,
         portalicon: niaidIcon,
         site: "",
-        schema: "/view/niaid",
+        schema: "/ns/niaid",
         showCoverage: false,
         coverage: ["Dataset", "ComputationalTool"],
         guides: [
@@ -135,7 +135,7 @@ export const portals = {
         image: creiddIcon,
         portalicon: creiddIcon,
         site: "",
-        schema: "/view/creid",
+        schema: "/ns/creid",
         showCoverage: false,
         coverage: ["Dataset"],
         guides: [
@@ -166,7 +166,7 @@ export const portals = {
         image: cd2h,
         portalicon: dde,
         site: "https://ctsa.ncats.nih.gov/cd2h/",
-        schema: "/view/biomedical",
+        schema: "/ns/biomedical",
         showCoverage: true,
         coverage: ["Dataset"],
         guides: [
@@ -178,7 +178,7 @@ export const portals = {
         ],
         api: "https://crawler.biothings.io/",
         datasets: "/dataset?template=/guide",
-        colors: [{ hex: "#63296B" }, { hex: "#4A7D8F" }],
+        colors: [{ hex: "#00bcd4" }, { hex: "#4A7D8F" }],
       },
       {
         name: "The National COVID Cohort Collaborative (N3C)",
@@ -195,7 +195,7 @@ export const portals = {
         image: n3cLogo,
         portalicon: n3c,
         site: "https://covid.cd2h.org/N3C",
-        schema: "/view/n3c",
+        schema: "/ns/n3c",
         showCoverage: true,
         coverage: ["Dataset"],
         guides: [
@@ -206,7 +206,7 @@ export const portals = {
           },
         ],
         datasets: "/dataset?template=/guide/n3c/dataset",
-        colors: [{ hex: "#4B7E8F" }, { hex: "#64296B" }],
+        colors: [{ hex: "#00bcd4" }, { hex: "#64296B" }],
         faq_link: "/faq/n3c",
       },
     ],