diff --git a/angular/src/app/landing/metadata/metadata.component.html b/angular/src/app/landing/metadata/metadata.component.html
index 7715a42ca..f8edc33b3 100644
--- a/angular/src/app/landing/metadata/metadata.component.html
+++ b/angular/src/app/landing/metadata/metadata.component.html
@@ -9,11 +9,11 @@
 <!-- JSON viewer with a thin grey border -->
 <div class="json-viewer-box" id="json-viewer">
     <!-- Header bar with JSON tree navigate buttons (left) and JSON export button (right)-->
-    <div class="json-viewer-header nist-blue-background">
+    <div class="json-viewer-header">
         <!-- JSON export button (right alignment) -->
         <div >
             <a [href]='getDownloadURL()'>
-                <span class="json-export-btn" (click)="onjson()"><i class="faa faa-file-code-o" style="margin-right: 5px;"></i>Export</span></a>
+                <span class="json-export-btn nist-blue-background" (click)="onjson()"><i class="faa faa-file-code-o" style="margin-right: 10px;"></i>Export</span></a>
         </div>
 
         <!-- JSON tree navigate buttons (left alignment) -->
diff --git a/angular/src/app/landing/metadata/metadata.component.css b/angular/src/app/landing/metadata/metadata.component.scss
similarity index 60%
rename from angular/src/app/landing/metadata/metadata.component.css
rename to angular/src/app/landing/metadata/metadata.component.scss
index 11217a112..aff8db230 100644
--- a/angular/src/app/landing/metadata/metadata.component.css
+++ b/angular/src/app/landing/metadata/metadata.component.scss
@@ -1,6 +1,5 @@
 .json-viewer-box {
-    /* margin-top: 1em;  */
-    border: 1px solid rgb(151, 151, 151, .2);
+    border: 1px solid rgba(151, 151, 151, .2);
 }
 
 .more-info {
@@ -9,11 +8,11 @@
 
 .json-viewer-header {
     height: 1.8em;
+    background-color: rgb(216, 228, 240);
 }
 
 .json-level {
     display:inline;
-    color: white;
 }
 
 .item-list {
@@ -22,7 +21,6 @@
     margin-left: -30px;
     height: 1.5em;
     width: auto;
-    /* font-weight: bold; */
 }
 
 .item-list li{
@@ -30,13 +28,13 @@
     padding:1px 10px 2px 10px;
     border-radius: 3px;
     margin-right:8px;
-    background-color: #4CAF50;
     font-weight:400;
     font-size: 14px;
 }
 
 .item-list li:hover {
-    background-color:#98d655;
+    background-color:#0b67a8;
+    color: #fff;
     cursor: pointer;
 }
 
@@ -55,11 +53,31 @@
     border-radius: 3px;
     margin: 3px 8px;
     color: white;
-    background-color: #4CAF50;
     font-weight:400;
     font-size: 14px;
 }
 
 .json-export-btn:hover {
-    background-color:#98d655;
+    background-color:#5daae0;
+}
+
+// JSON viewer styling
+$type-colors: (
+  string: #ff0000,
+  number: #00443d,
+  boolean: #551d4c,
+  date: #014966,
+
+  array: rgb(0, 0, 0),
+  object: rgb(0, 0, 0),
+  function: rgb(0, 0, 0),
+
+  'null': #fff,
+  undefined: #fff,
+);
+
+@each $type, $color in $type-colors {
+  ::ng-deep .segment-type-#{$type} > .segment-main > .segment-value {
+    color: $color !important;
+  }
 }
\ No newline at end of file
diff --git a/angular/src/app/landing/metadata/metadata.component.ts b/angular/src/app/landing/metadata/metadata.component.ts
index ae02e8dd0..f819b8a22 100644
--- a/angular/src/app/landing/metadata/metadata.component.ts
+++ b/angular/src/app/landing/metadata/metadata.component.ts
@@ -7,7 +7,7 @@ import { GoogleAnalyticsService } from '../../shared/ga-service/google-analytics
 @Component({
   selector: 'metadata-detail',
   templateUrl: './metadata.component.html',
-  styleUrls: ['./metadata.component.css']
+  styleUrls: ['./metadata.component.scss']
 })
 export class MetadataComponent implements OnChanges {
     nerdmRecord: any = {};