diff --git a/client/src/playground/console.js b/client/src/playground/console.js
index 2897a3432004..e087a7c6b7b3 100644
--- a/client/src/playground/console.js
+++ b/client/src/playground/console.js
@@ -21,7 +21,7 @@ export class PlayConsole extends LitElement {
 
   render() {
     return html`
-      <span>Console</span>
+      <span class="header">Console</span>
       <ul>
         ${this.vConsole.map(({ message }) => {
           return html`
diff --git a/client/src/playground/console.scss b/client/src/playground/console.scss
index 15368f69cf5f..42f969410d11 100644
--- a/client/src/playground/console.scss
+++ b/client/src/playground/console.scss
@@ -1,33 +1,38 @@
 :host {
   display: flex;
   flex-direction: column;
-  font-size: smaller;
+  font-size: var(--type-smaller-font-size);
   margin: 0;
   width: 100%;
+}
 
-  > span {
-    background-color: var(--code-background-inline);
-    font-weight: 600;
-    text-align: center;
-    width: 100%;
-  }
+.header {
+  background-color: var(--code-background-inline);
+  font-weight: 600;
+  text-align: center;
+  width: 100%;
+}
 
-  ul {
-    background-color: var(--code-background-inline);
-    height: 6rem;
-    list-style: none;
-    margin: 0;
-    max-height: 6rem;
-    overflow: auto;
-    padding: 0;
-    width: 100%;
+ul {
+  background-color: var(--code-background-inline);
+  height: 6rem;
+  list-style: none;
+  margin: 0;
+  max-height: 6rem;
+  overflow: auto;
+  padding: 0;
+  width: 100%;
+}
 
-    li {
-      padding: 0 1rem;
+li {
+  padding: 0 1rem;
 
-      &::before {
-        content: ">";
-      }
-    }
+  &::before {
+    content: ">";
   }
 }
+
+code {
+  font-family: var(--font-code);
+  tab-size: 4;
+}