diff --git a/components/Credentials.vue b/components/Credentials.vue
index 1fec2fa..47948ca 100644
--- a/components/Credentials.vue
+++ b/components/Credentials.vue
@@ -35,7 +35,8 @@
             :no-results="noResults"
             :search="search"
             :loading="loading"
-            :error-text="errorText" />
+            :error-text="errorText"
+            :schema-map="schemaMap" />
         </div>
       </br-q-title-card>
     </div>
@@ -76,6 +77,10 @@ export default {
       default: '',
       type: String,
       required: true
+    },
+    schemaMap: {
+      type: Object,
+      required: true
     }
   },
   data() {
diff --git a/components/CredentialsList.vue b/components/CredentialsList.vue
index 3803a88..1f62e89 100644
--- a/components/CredentialsList.vue
+++ b/components/CredentialsList.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="compact">
     <credential-compact-bundle
-      :credentials="credentials"
+      :credentials="credentialsList"
       :schema-map="schemaMap"
       :store="store" />
   </div>
@@ -64,6 +64,7 @@
  */
 import CredentialCardBundle from './CredentialCardBundle.vue';
 import CredentialCompactBundle from './CredentialCompactBundle.vue';
+import flatten from 'flat';
 
 export default {
   name: 'CredentialsList',
@@ -118,19 +119,32 @@ export default {
       default: '',
       type: String,
       required: false
+    },
+    schemaMap: {
+      type: Object,
+      required: true
     }
   },
-  data() {
-    return {
-      schemaMap: {}
-    };
-  },
   computed: {
     credentialsList() {
+      const credentials = this.credentials.map(credential => {
+        // allow access to all fields in a flat structure for a, credential card
+        // displayer. note that this duplicates data, thus incurring a 2x
+        // penalty in space per credential. In the future, an api that
+        // translates dot notation i.e. 'credentialSubject.address.zipCode'
+        // to the path found in the JS Object at execution time would be
+        // desirable.
+        const flattenedVc = {___vc___: flatten(credential)};
+        credential.credentialSubject = {
+          ...flatten(flattenedVc),
+          ...credential.credentialSubject
+        }
+        return credential;
+      });
       if(this.limit > 0) {
-        return this.credentials.slice(0, this.limit);
+        return credentials.slice(0, this.limit);
       }
-      return this.credentials;
+      return credentials;
     },
     showViewMore() {
       return this.credentials && this.credentials.length > this.limit &&
diff --git a/components/StoreCredentials.vue b/components/StoreCredentials.vue
index c41789a..8d4c50b 100644
--- a/components/StoreCredentials.vue
+++ b/components/StoreCredentials.vue
@@ -30,6 +30,7 @@
             :store="true"
             :loading="loading"
             :credentials="verifiableCredential"
+            :schema-map="rootData.schemaMap"
             :selected-profile-id="selectedProfileId" />
         </div>
       </div>
@@ -65,6 +66,7 @@
 import CredentialsList from './CredentialsList.vue';
 import {profileManager} from '@bedrock/web-wallet';
 import ProfileChooser from './ProfileChooser.vue';
+import {rootData} from '../lib/rootData.js';
 
 export default {
   name: 'StoreCredentials',
@@ -93,9 +95,13 @@ export default {
   },
   data() {
     return {
+      rootData: undefined,
       selectedProfileId: undefined
     };
   },
+  created() {
+    this.rootData = rootData;
+  },
   computed: {
     selectedProfile() {
       if(!this.profiles) {
diff --git a/package.json b/package.json
index 5add073..ca156ca 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@digitalbazaar/web-app-manifest-utils": "^1.0.2",
+    "flat": "^5.0.2",
     "qrcode": "^1.5.0",
     "randomcolor": "^0.6.2"
   },
diff --git a/routes/HomePage.vue b/routes/HomePage.vue
index 52a845e..b113a8e 100644
--- a/routes/HomePage.vue
+++ b/routes/HomePage.vue
@@ -5,6 +5,7 @@
       :profiles="profiles"
       :loading="loading"
       :error-text="errorText"
+      :schema-map="rootData.schemaMap"
       @filtered-profiles="filteredProfiles = $event"
       @filtered-credentials-loading="loadingFilteredCredentials = $event" />
   </div>