diff --git a/src/app.css b/src/app.css
index c72999d..2c3308d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -11,7 +11,7 @@
 	--tertiary-color: #edf0f8;
 	--accent-color: #de09fa;
 	/*--accent-color: #ff0df8;*/
-	--heading-color: rgba(0, 0, 0, 0.8);
+	--heading-color: rgba(0, 0, 0, 0.9);
 	--text-color: #444444;
 	--background-without-opacity: rgba(255, 255, 255, 0.7);
 	--column-width: 42rem;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 862facf..83cd349 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -231,14 +231,15 @@
 				</div>
 			</div>
 		</div>
-		{#if $state.items?.length > 0}
+		{#if $state.queryState !== queryState.IDLE}
 			<div class="data-view" style={`font-size: ${fontSizes[jsonDisplay.fontSize]}%`}>
 				<JsonView json={jsonDisplay.showMetadata ? $state.items : $state.items.map(item => item.value)}
 						  depth={jsonDisplay.expandAll ? Infinity : 1}/>
 			</div>
 		{:else }
-			<div class="data-view no-query-data">
-				<h2>No query data</h2>
+			<div class="data-view no-query-data" style={`font-size: ${fontSizes[jsonDisplay.fontSize]}%`}>
+				<JsonView json={{value: {"Hey": "There's no data here yet!", "When you start a query": "your results will appear here!"}}}
+						  depth={jsonDisplay.expandAll ? Infinity : -1}/>
 			</div>
 		{/if}
 	</div>
@@ -391,13 +392,6 @@
 	 */
 
 	.no-query-data {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.no-query-data h2 {
-		font-size: 32px;
-		color: rgba(0, 0, 0, 0.3);
+		opacity: 65%;
 	}
 </style>