diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 60096bc8..f5f528dc 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -17,62 +17,65 @@ function classNames(...classes) {
 export function PatternsTab({ context }) {
   const { userPatterns, activePattern } = useSettings();
   return (
-    <div className="px-4 w-full text-foreground">
-      <h2 className="text-xl mb-2">My Patterns</h2>
-      <div className="space-x-1">
-        <button
-          className="underline"
-          onClick={() => {
-            const name = newUserPattern();
-            const { code } = getUserPattern(name);
-            console.log('code', code);
-            context.handleUpdate(code);
-          }}
-        >
-          new
-        </button>
-        <button className="underline" onClick={() => duplicateActivePattern()}>
-          duplicate
-        </button>
-        <button className="underline" onClick={() => deleteActivePattern()}>
-          delete
-        </button>
-        <button className="underline" onClick={() => clearUserPatterns()}>
-          clear
-        </button>
-      </div>
-      {Object.entries(userPatterns).map(([key, up]) => (
-        <a
-          key={key}
-          className={classNames(
-            'mr-4 hover:opacity-50 cursor-pointer inline-block',
-            key === activePattern ? 'underline' : '',
-          )}
-          onClick={() => {
-            const { code } = up;
-            context.handleUpdate(code);
-            setActivePattern(key);
-          }}
-        >
-          {key}
-        </a>
-      ))}
-      <h2 className="text-xl mb-2">Examples</h2>
-      {Object.entries(tunes).map(([key, tune]) => (
-        <a
-          key={key}
-          className={classNames(
-            'mr-4 hover:opacity-50 cursor-pointer inline-block',
-            key === activePattern ? 'underline' : '',
-          )}
-          onClick={() => {
-            setActivePattern(key);
-            context.handleUpdate(tune);
-          }}
-        >
-          {key}
-        </a>
-      ))}
+    <div className="px-4 w-full text-foreground space-y-4">
+      <section>
+        <h2 className="text-xl mb-2">My Patterns</h2>
+        <div className="space-x-1">
+          <button
+            className="underline"
+            onClick={() => {
+              const name = newUserPattern();
+              const { code } = getUserPattern(name);
+              context.handleUpdate(code);
+            }}
+          >
+            new
+          </button>
+          <button className="underline" onClick={() => duplicateActivePattern()}>
+            duplicate
+          </button>
+          <button className="underline" onClick={() => deleteActivePattern()}>
+            delete
+          </button>
+          <button className="underline" onClick={() => clearUserPatterns()}>
+            clear
+          </button>
+        </div>
+        {Object.entries(userPatterns).map(([key, up]) => (
+          <a
+            key={key}
+            className={classNames(
+              'mr-4 hover:opacity-50 cursor-pointer inline-block',
+              key === activePattern ? 'underline' : '',
+            )}
+            onClick={() => {
+              const { code } = up;
+              setActivePattern(key);
+              context.handleUpdate(code);
+            }}
+          >
+            {key}
+          </a>
+        ))}
+      </section>
+      <section>
+        <h2 className="text-xl mb-2">Examples</h2>
+        {Object.entries(tunes).map(([key, tune]) => (
+          <a
+            key={key}
+            className={classNames(
+              'mr-4 hover:opacity-50 cursor-pointer inline-block',
+              key === activePattern ? 'underline' : '',
+            )}
+            onClick={() => {
+              setActivePattern(key);
+              context.handleUpdate(tune);
+            }}
+          >
+            {key}
+          </a>
+        ))}
+      </section>
     </div>
   );
 }