diff --git a/src/components/Playground.js b/src/components/Playground.js
index 1759b352..367c6602 100644
--- a/src/components/Playground.js
+++ b/src/components/Playground.js
@@ -48,7 +48,6 @@ function Playground() {
           </div>
         </div>
 
-        <div className="flex-none h-3" />
         <PlaygroundPanels />
       </div>
     </Layout>
diff --git a/src/components/PlaygroundPanels.js b/src/components/PlaygroundPanels.js
index c3bf9ac5..674322d7 100644
--- a/src/components/PlaygroundPanels.js
+++ b/src/components/PlaygroundPanels.js
@@ -28,19 +28,20 @@ function PlaygroundPanels() {
 
   return (
     <>
-      <div className="px-4 gap-4 flex py-2">
-        {panels.map((panelName) => (
-          <div key={panelName} className="flex items-center">
-            <div className="text-left space-x-2">
+      <div className="px-4 gap-4 flex pt-3 pb-1 h-8">
+        <div className="flex items-center">
+          <div className="text-left space-x-2">
+            {panels.map((panelName) => (
               <TabButton
+                key={panelName}
                 onClick={() => setPanel(panelName)}
                 active={panelName === panel}
               >
                 {panelName}
               </TabButton>
-            </div>
+            ))}
           </div>
-        ))}
+        </div>
       </div>
       <Suspense fallback={null}>
         {panel === panels[0] && (