diff --git a/playground/index.html b/playground/index.html
index de29400..9dac85c 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <h1>Playground</h1>
+    <hr />
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
index 9dbbb2c..cfe4b9f 100644
--- a/playground/src/App.tsx
+++ b/playground/src/App.tsx
@@ -37,16 +37,25 @@ export function App() {
     <div>
       <State />
       <Events />
+      <GetCapabilities />
+      <p>
+        <hr />
+      </p>
       <Connect />
-      <Register />
       <Login />
-      <UpgradeAccount />
-      <Disconnect />
+      <Register />
       <Accounts />
-      <GetCapabilities />
+      <Disconnect />
+      <UpgradeAccount />
+      <p>
+        <hr />
+      </p>
       <AuthorizeKey />
-      <RevokeKey />
       <GetKeys />
+      <RevokeKey />
+      <p>
+        <hr />
+      </p>
       <SendCalls />
       <SendTransaction />
       <SignMessage />
@@ -171,7 +180,7 @@ function Connect() {
           Register
         </button>
       </div>
-      <pre>{JSON.stringify(result, null, 2)}</pre>
+      {result ? <pre>{JSON.stringify(result, null, 2)}</pre> : null}
     </div>
   )
 }
@@ -263,7 +272,7 @@ function GetCapabilities() {
       >
         Get Capabilities
       </button>
-      <pre>{JSON.stringify(result, null, 2)}</pre>
+      {result ? <pre>{JSON.stringify(result, null, 2)}</pre> : null}
     </div>
   )
 }
