diff --git a/event.html b/event.html
index daf23e6..87dc9d3 100644
--- a/event.html
+++ b/event.html
@@ -97,12 +97,20 @@
             <div class="label">LN Address</div>
             {{.content_json.lud16}}
           </div>
+
           <div class="field">
             <div class="label">Metadata Event</div>
-            {{.nevent}}
+            <div>{{.nevent}}</div>
           </div>
-          <div class="field">
-            <div class="label">JSON</div>
+
+          <div class="field advanced-switch-wrapper">
+            <input type="checkbox" id="advanced-switch" class="advanced-switch" />
+            <label for="advanced-switch">X</label>
+            <label for="advanced-switch">Show more details</label>
+          </div>
+
+          <div class="field advanced">
+            <div class="label">Event JSON</div>
             <div class="json">{{.eventJSON}}</div>
           </div>
           <div class="field separator"></div>
@@ -137,10 +145,8 @@
 
     <div class="background"></div>
 
-    <div style="display: flex; justify-content: center">
-      <span>
-        powered by <a href="https://git.fiatjaf.com/njump">njump</a>
-      </span>
+    <div class="footer">
+      Powered by <a href="https://git.fiatjaf.com/njump">njump</a>
     </div>
 
     <script>
@@ -169,13 +175,46 @@
     </script>
 
     <script>
+
+      let jsons = document.querySelectorAll('.json')
+      for (let i = 0; i < jsons.length; i++) {
+        console.log(jsons[i].innerHTML);
+        jsons[i].innerHTML = syntaxHighlight(jsons[i].innerHTML);
+      }
+
       const shareButton = document.querySelector('.open-list');
       const clients_list = document.querySelector('.columnC');
-
       shareButton.addEventListener('click', function() {
         clients_list.classList.toggle('up');
-        // links.classList.toggle('visible');
       });
+
+      const advanceSwitch = document.querySelector('.advanced-switch');
+      const advanced_list = document.querySelectorAll('.advanced');
+      advanceSwitch.addEventListener('change', function() {
+        advanced_list.forEach(element => {
+          element.classList.toggle('visible');
+        });
+      });
+
+      function syntaxHighlight(json) {
+          json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+          return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+              var cls = 'number';
+              if (/^"/.test(match)) {
+                  if (/:$/.test(match)) {
+                      cls = 'key';
+                  } else {
+                      cls = 'string';
+                  }
+              } else if (/true|false/.test(match)) {
+                  cls = 'boolean';
+              } else if (/null/.test(match)) {
+                  cls = 'null';
+              }
+              return '<span class="' + cls + '">' + match + '</span>';
+          });
+      }
+
     </script>
     
   </body>
diff --git a/static/styles.css b/static/styles.css
index 4033ab1..c268a48 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -66,7 +66,7 @@ a {
 @media (max-width: 580px) {
   .container_wrapper {
     display: block;
-    width: 90%;
+    padding: 0 1rem;
     margin: 0 auto;
   }
 }
@@ -159,6 +159,7 @@ a {
   .container.profile .columnB {
     flex-basis: 100%;
     max-width: 100%;
+    margin-right: 0;
   }
 }
 .container.profile .columnB .name {
@@ -193,6 +194,84 @@ a {
   font-size: 0.8rem;
   color: #E32A6D;
 }
+.container.profile .columnB .field.advanced {
+  display: none;
+}
+.container.profile .columnB .field.advanced.visible {
+  display: block;
+}
+.container.profile .columnB .field.advanced .label {
+  padding: 0.2rem 1rem;
+  margin: 0 -1rem;
+  color: #373737;
+  background-color: #C9C9C9;
+}
+.container.profile .columnB .field .json, .container.profile .columnB .field .data {
+  white-space: pre-wrap;
+  word-break: break-all;
+  background-color: #F3F3F3;
+  padding: 1rem;
+  margin: 0 -1rem;
+}
+.container.profile .columnB .field .json .key, .container.profile .columnB .field .data .key {
+  display: inline-block;
+  margin-top: 0.5rem;
+  color: #E32A6D;
+}
+.container.profile .columnB .field .json .string, .container.profile .columnB .field .data .string {
+  color: #373737;
+}
+.container.profile .columnB .field .json .number, .container.profile .columnB .field .data .number {
+  color: darkorange;
+}
+.container.profile .columnB .field .json .boolean, .container.profile .columnB .field .data .boolean {
+  color: #373737;
+}
+.container.profile .columnB .field .json .null, .container.profile .columnB .field .data .null {
+  color: #373737;
+}
+.container.profile .columnB .field.advanced-switch-wrapper {
+  display: flex;
+  align-items: center;
+}
+.container.profile .columnB .field.advanced-switch-wrapper input[type=checkbox] {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+  display: none;
+}
+.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type {
+  cursor: pointer;
+  text-indent: -9999px;
+  width: 3rem;
+  height: 1.4rem;
+  background: grey;
+  display: inline-block;
+  border-radius: 100px;
+  position: relative;
+  margin-right: 0.5rem;
+}
+.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 1.2rem;
+  height: 1.2rem;
+  background: #fff;
+  border-radius: 1rem;
+  transition: 0.5s;
+}
+.container.profile .columnB .field.advanced-switch-wrapper input:checked + label {
+  background: #E32A6D;
+}
+.container.profile .columnB .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
+  left: calc(100% - 2px);
+  transform: translateX(-100%);
+}
+.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:active:after {
+  width: 130px;
+}
 .container.profile .columnC {
   flex-basis: 25%;
   margin-top: 2rem;
@@ -312,30 +391,9 @@ a {
   }
 }
 
-pre {
-  outline: 1px solid #ccc;
-  padding: 5px;
-  margin: 5px;
-}
-
-.string {
-  color: green;
-}
-
-.number {
-  color: darkorange;
-}
-
-.boolean {
-  color: blue;
-}
-
-.null {
-  color: magenta;
-}
-
-.key {
-  color: red;
+.footer {
+  font-size: 0.8rem;
+  text-align: center;
 }
 
 /*# sourceMappingURL=styles.css.map */
diff --git a/static/styles.css.map b/static/styles.css.map
index b02dc48..693d9dc 100644
--- a/static/styles.css.map
+++ b/static/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EAKA;EACA;EACA;EACA;;AAPA;EAHD;IAIE;IACA;;;AAMD;EACC;;AACA;EACC,OA1JM;;AA4JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA7JkB;;AA8JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OA/KM;;AAmLT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OA7OM;EA8ON,kBAxOiB;EAyOjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA7PI;;;AAgQN;EACC,kBA1PgB;;AA8PjB;EADD;IAEE;;;AAED;EACC,kBAjQgB;EAkQhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAtQe;;AA0QlB;EACC;EACA;EACA,OArRM;;AAsRN;EAJD;IAKE;;;;AAQL;EAAK;EAAyB;EAAc;;;AAC5C;EAAU;;;AACV;EAAU;;;AACV;EAAW;;;AACX;EAAQ;;;AACR;EAAO","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OA3JM;;AA6JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA9JkB;;AA+JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAhLM;;AAkLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OA5LK;EA6LL,kBA5LK;;AA+LP;EACC;EACA;EACA,kBA3LiB;EA4LjB;EACA;;AAEA;EACC;EACA;EACA,OAxMK;;AA2MN;EAAU,OA7MJ;;AA8MN;EAAU;;AACV;EAAW,OA/ML;;AAgNN;EAAQ,OAhNF;;AAmNP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC,YArPK;;AAwPN;EACC;EACA;;AAGD;EACC;;AAOJ;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OA/TM;EAgUN,kBA1TiB;EA2TjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA/UI;;;AAkVN;EACC,kBA5UgB;;AAgVjB;EADD;IAEE;;;AAED;EACC,kBAnVgB;EAoVhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAxVe;;AA4VlB;EACC;EACA;EACA,OAvWM;;AAwWN;EAJD;IAKE;;;;AAOL;EACC;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/static/styles.scss b/static/styles.scss
index 1b39a60..bbc221a 100644
--- a/static/styles.scss
+++ b/static/styles.scss
@@ -69,7 +69,7 @@ a {
 	align-items: center;
   @media (max-width: 580px) {
 		display: block;
-    width: 90%;
+    padding: 0 1rem;
 		margin: 0 auto;
   }
 }
@@ -142,14 +142,15 @@ a {
 	.columnB {
 		flex-basis: 50%;
 		max-width: 50%;
-		@media (max-width: 580px) {
-			flex-basis: 100%;
-			max-width: 100%;
-		}
 		flex-grow: 0;
 		flex-shrink: 0;
 		word-wrap: break-word;
 		margin-right: 1vw;
+		@media (max-width: 580px) {
+			flex-basis: 100%;
+			max-width: 100%;
+			margin-right: 0;
+		}
 		.name {
 			font-size: 1.6rem;
 			.display {
@@ -177,6 +178,87 @@ a {
 				font-size: 0.8rem;
 				color: $color_3;
 			}
+			&.advanced {
+				display: none;
+				&.visible {
+					display: block;
+				}
+				.label {
+					padding: 0.2rem 1rem;
+					margin: 0 -1rem;
+					color: $color_1;
+					background-color: $color_2;
+				}
+			}
+			.json, .data {
+				white-space: pre-wrap;
+				word-break: break-all;
+				background-color: $background-color_3;
+				padding: 1rem;
+				margin: 0 -1rem;
+			
+				.key {
+					display: inline-block;
+					margin-top: 0.5rem;
+					color: $color_3;
+				}
+			
+				.string { color: $color_1; }
+				.number { color: darkorange; }
+				.boolean { color: $color_1; }
+				.null { color: $color_1; }
+			}
+
+			&.advanced-switch-wrapper {
+				display: flex;
+				align-items: center;
+			
+				input[type=checkbox]{
+					height: 0;
+					width: 0;
+					visibility: hidden;
+					display: none;
+				}
+			
+				label:first-of-type {
+					cursor: pointer;
+					text-indent: -9999px;
+					width: 3rem;
+					height: 1.4rem;
+					background: grey;
+					display: inline-block;
+					border-radius: 100px;
+					position: relative;
+					margin-right: 0.5rem;
+				}
+			
+				label:first-of-type:after {
+					content: '';
+					position: absolute;
+					top: 2px;
+					left: 2px;
+					width: 1.2rem;
+					height: 1.2rem;
+					background: #fff;
+					border-radius: 1rem;
+					transition: 0.5s;
+				}
+			
+				input:checked + label {
+					background: $color_3;
+				}
+			
+				input:checked + label:first-of-type:after {
+					left: calc(100% - 2px);
+					transform: translateX(-100%);
+				}
+			
+				label:first-of-type:active:after {
+					width: 130px;
+				}
+			
+			}
+
 		}
 	}
 	.columnC {
@@ -288,10 +370,7 @@ a {
 	}	
 }
 
-
-pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
-.string { color: green; }
-.number { color: darkorange; }
-.boolean { color: blue; }
-.null { color: magenta; }
-.key { color: red; }
\ No newline at end of file
+.footer {
+	font-size: 0.8rem;
+	text-align: center;
+}
\ No newline at end of file