diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
index 2aeaeb5..5dc28a1 100644
--- a/projects/demo/src/app/app.component.html
+++ b/projects/demo/src/app/app.component.html
@@ -1,5 +1,13 @@
 <h2>ngx-json-treeview</h2>
 
+<h3>Primatives</h3>
+<div class="json-container">
+  <ngx-json-treeview [json]="13" />
+  <ngx-json-treeview [json]="'hello, world!'" />
+  <ngx-json-treeview [json]="true" />
+  <ngx-json-treeview [json]="null" />
+</div>
+
 <h3>Collapsed</h3>
 <div class="json-container">
   <ngx-json-treeview [json]="json" [expanded]="false" />
diff --git a/projects/demo/src/app/app.component.scss b/projects/demo/src/app/app.component.scss
index 14bc1fe..17a9d08 100644
--- a/projects/demo/src/app/app.component.scss
+++ b/projects/demo/src/app/app.component.scss
@@ -17,6 +17,7 @@
 }
 
 .preview-pane {
+  background: #f9f9f9;
   border-left: 1px solid #ccc;
   padding: 10px;
 }
diff --git a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
index ef31668..0be7c17 100644
--- a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
+++ b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
@@ -1,69 +1,77 @@
 <section class="ngx-json-treeview">
-  @if (_currentDepth() === 0) {
-    <span class="puctuation">{{ '{' }}</span>
-  }
-  @for (segment of segments(); track segment) {
-    <section [class]="'segment segment-type-' + segment.type">
-      @let expandable = isExpandable(segment);
-      <section class="segment-main">
-        <span
-          [class.expandable]="expandable"
-          [class.expanded]="segment.expanded"
-          (click)="toggle(segment)">
-          @if (expandable) {
-            <div class="toggler"></div>
-          }
-          <span class="segment-key">{{ segment.key }}</span>
-        </span>
-        <span class="puctuation">: </span>
-        @if (!expandable || !segment.expanded) {
+  @if (segments().length === 0) {
+    <section [class]="'segment-type-' + rootType()">
+      <span class="segment-primative">
+        {{ json() ?? 'null' }}
+      </span>
+    </section>
+  } @else {
+    @if (_currentDepth() === 0) {
+      <span class="puctuation">{{ '{' }}</span>
+    }
+    @for (segment of segments(); track segment) {
+      <section [class]="'segment segment-type-' + segment.type">
+        @let expandable = isExpandable(segment);
+        <section class="segment-main">
           <span
-            [class]="expandable ? 'segment-label' : 'segment-value'"
-            [class.clickable]="
-              enableClickableValues() && isClickableValue()(segment)
-            "
-            (click)="
-              isClickableValue()(segment)
-                ? onValueClickHandler(segment)
-                : undefined
-            ">
-            {{ segment.description }}
-          </span>
-        } @else if (expandable && segment.expanded) {
-          <span class="puctuation">
-            @if (segment.type === 'array') {
-              {{ '[' }}
-            } @else {
-              {{ '{' }}
+            [class.expandable]="expandable"
+            [class.expanded]="segment.expanded"
+            (click)="toggle(segment)">
+            @if (expandable) {
+              <div class="toggler"></div>
             }
+            <span class="segment-key">{{ segment.key }}</span>
           </span>
-        }
-      </section>
-      @if (expandable && segment.expanded) {
-        <section class="children">
-          <ngx-json-treeview
-            [json]="segment.value"
-            [expanded]="expanded()"
-            [depth]="depth()"
-            [isClickableValue]="isClickableValue()"
-            [enableClickableValues]="enableClickableValues()"
-            [_parent]="segment"
-            [_currentDepth]="_currentDepth() + 1"
-            (onValueClick)="onValueClickHandler($event)" />
-          @if (['object', 'array'].includes(segment.type ?? '')) {
+          <span class="puctuation">: </span>
+          @if (!expandable || !segment.expanded) {
+            <span
+              [class]="expandable ? 'segment-label' : 'segment-value'"
+              [class.clickable]="
+                enableClickableValues() && isClickableValue()(segment)
+              "
+              (click)="
+                isClickableValue()(segment)
+                  ? onValueClickHandler(segment)
+                  : undefined
+              ">
+              {{ segment.description }}
+            </span>
+          } @else if (expandable && segment.expanded) {
             <span class="puctuation">
               @if (segment.type === 'array') {
-                {{ ']' }}
+                {{ '[' }}
               } @else {
-                {{ '}' }}
+                {{ '{' }}
               }
             </span>
           }
         </section>
-      }
-    </section>
-  }
-  @if (_currentDepth() === 0) {
-    <span class="puctuation">{{ '}' }}</span>
+        @if (expandable && segment.expanded) {
+          <section class="children">
+            <ngx-json-treeview
+              [json]="segment.value"
+              [expanded]="expanded()"
+              [depth]="depth()"
+              [isClickableValue]="isClickableValue()"
+              [enableClickableValues]="enableClickableValues()"
+              [_parent]="segment"
+              [_currentDepth]="_currentDepth() + 1"
+              (onValueClick)="onValueClickHandler($event)" />
+            @if (['object', 'array'].includes(segment.type ?? '')) {
+              <span class="puctuation">
+                @if (segment.type === 'array') {
+                  {{ ']' }}
+                } @else {
+                  {{ '}' }}
+                }
+              </span>
+            }
+          </section>
+        }
+      </section>
+    }
+    @if (_currentDepth() === 0) {
+      <span class="puctuation">{{ '}' }}</span>
+    }
   }
 </section>
diff --git a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss
index abc360a..43f892a 100644
--- a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss
+++ b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss
@@ -105,4 +105,18 @@ $type-colors: (
   .puctuation {
     color: var(--ngx-json-punctuation, #000);
   }
+
+  @each $type, $color in $type-colors {
+    .segment-type-#{$type} > .segment-primative {
+      color: #{$color};
+    }
+  }
+  .segment-primative {
+    margin: 0px;
+    padding: 0px;
+  }
+  // special cases that need highlighting
+  .segment-type-null > .segment-primative {
+    background-color: var(--ngx-json-null-bg, red);
+  }
 }
diff --git a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts
index 3fc4c06..eca5fd0 100644
--- a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts
+++ b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts
@@ -113,17 +113,15 @@ export class NgxJsonTreeviewComponent {
    */
   _currentDepth = input<number>(0);
 
+  rootType = computed<string>(() =>
+    this.json() != null ? typeof this.json() : 'null'
+  );
   segments = computed<Segment[]>(() => {
     const json = decycle(this.json());
-    const arr = [];
-    if (typeof json === 'object') {
-      Object.keys(json).forEach((key) => {
-        arr.push(this.parseKeyValue(key, json[key]));
-      });
-    } else {
-      arr.push(this.parseKeyValue(`(${typeof json})`, json));
+    if (typeof json === 'object' && json != null) {
+      return Object.keys(json).map((key) => this.parseKeyValue(key, json[key]));
     }
-    return arr;
+    return [];
   });
   isExpanded = computed<boolean>(
     () =>