diff --git a/site/src/components/code-block.js b/site/src/components/code-block.js
index 31fca27..338170a 100644
--- a/site/src/components/code-block.js
+++ b/site/src/components/code-block.js
@@ -10,7 +10,9 @@ class CodeBlockComponent extends HTMLElement {
       <div>
         <pre class="language-${lang} ${
       lineNumbers ? "line-numbers" : ""
-    }" id="pre"><code id="code">${this.trimmed}</code></pre>
+    }" id="pre" style="padding:1em;background:#efefef;margin:1em 0;border-radius:5px;font-size:large;"><code id="code">${
+      this.trimmed
+    }</code></pre>
       </div>
     `;
   }
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index 6acc485..98ad84a 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -13,7 +13,7 @@
       header,
       footer,
       main {
-        max-width: 35em;
+        max-width: 40em;
         margin: 0 auto;
       }
     </style>
@@ -27,6 +27,7 @@
           no-framework framework that assists developers in leveraging the web
           platform.
         </p>
+        <code-block>npm create mcfly@latest</code-block>
         <p>
           Here's a sample interactive custom element:
           <vanilla-hello-world data-name="McFly"></vanilla-hello-world>