diff --git a/public/css/style.css b/public/css/style.css
index 83ba31d..f9d35e9 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -257,15 +257,39 @@ main {
 	background-color: #dbdbdb;
 }
 
-.json {
-	display: block;
-	white-space: pre-wrap;
+.text-truncate {
+	display: inline-block;
+	max-width: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.json,
+code {
+	white-space: pre-line;
+}
+
+.indent h4,
+.indent h5,
+.indent h6 {
+	padding: 0;
 }
 
 .indent {
 	padding-left: 2rem;
-	margin-top: -2rem;
-	line-height: 2;
+}
+
+.indent * {
+	line-height: 1.5; /* If this value is changed, make sure it is atleast 1 to avoid clipping when text wraps */
+	font-size: 1em;
+	margin: 0;
+	text-align: left;
+	font-weight: 400;
+}
+
+.indent a {
+	font-weight: 700;
 }
 
 /* documentation */
diff --git a/public/js/main.js b/public/js/main.js
index 56d876f..d915c2d 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -63,7 +63,17 @@ function renderMatches(matches) {
 
 			// Create an element that looks like a JSON object for every match
 			li.innerHTML = `
-				<pre class="json"><code>{<div class="indent"><br>name: '${match.name}',<br>url: <a href="${match.url}" target="_blank">'${match.url}',</a><br class="middle-br">keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]<br></div>},</code></pre>
+				<pre class="json">
+					<code>
+						{
+							<div class="indent">
+								<h4>name: ${match.name},</h4>
+								<h5>url: '<a href=${match.url} target="_blank">${match.url}</a>',</h5>
+								<h6 class="text-truncate">keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]</h6>
+							</div>
+						},
+					</code>
+				</pre>
 			`;
 
 			list.appendChild(li);
diff --git a/views/index.ejs b/views/index.ejs
index 6f349c9..49d1311 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -60,7 +60,17 @@
 									<li>
 										<!-- JSON Format for DOM rendering -->
 										<!-- Add indentation, line break and quotes around each key's value -->
-										<pre class="json"><code>{<div class="indent"><br>name: '<%= resources[i].name %>',<br>url: <a href=<%= resources[i].url %> target="_blank">'<%= resources[i].url %>',</a><br class="middle-br">keywords: [<%= resources[i].keywords.map(keyword => `'${keyword}'`).join(", ") %>]<br></div>},</code></pre>
+										<pre class="json">
+											<code>
+												{
+													<div class="indent">
+														<h4>name: '<%= resources[i].name %>',</h4>
+														<h5>url: '<a href=<%= resources[i].url %> target="_blank"><%= resources[i].url %></a>',</h5>
+														<h6 class="text-truncate">keywords: [<%= resources[i].keywords.map(keyword => `'${keyword}'`).join(", ") %>]</h6>
+													</div>
+												},
+											</code>
+										</pre>
 									</li>
 								<% } %>
 							</ul>