diff --git a/packages/www/src/global.d.ts b/packages/www/src/global.d.ts
deleted file mode 100644
index 6aef027fd..000000000
--- a/packages/www/src/global.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    'sp-split-view': React.DetailedHTMLProps<
-      React.HTMLAttributes<HTMLElement>,
-      HTMLElement
-    >;
-  }
-}
diff --git a/packages/www/src/web-components/play-ground.tsx b/packages/www/src/web-components/play-ground.tsx
index 02a40571b..a5e2a0fd1 100644
--- a/packages/www/src/web-components/play-ground.tsx
+++ b/packages/www/src/web-components/play-ground.tsx
@@ -8,6 +8,11 @@ export default async function PlayGround(
   const code = state<string>('');
   const preview: HTMLIFrameElement = self.querySelector('#preview-iframe')!;
   const activeTab = state<string>('tab-wc');
+  const isMobileLayout = state<boolean>(false);
+
+  function updateSplitViewOrientation() {
+    isMobileLayout.value = window.innerWidth <= 968;
+  }
 
   function onReceiveCompiledCode(e: MessageEvent) {
     if (e.data.source !== 'brisa-playground-preview') return;
@@ -22,11 +27,16 @@ export default async function PlayGround(
   }
 
   onMount(() => {
+    // Set initial layout based on screen size
+    updateSplitViewOrientation();
+
     window.addEventListener('message', onReceiveCompiledCode);
+    window.addEventListener('resize', updateSplitViewOrientation);
   });
 
   cleanup(() => {
     window.removeEventListener('message', onReceiveCompiledCode);
+    window.removeEventListener('resize', updateSplitViewOrientation);
   });
 
   css`
@@ -99,20 +109,75 @@ export default async function PlayGround(
 
       .original-code {
         width: 100%;
-        height: 100%;
       }
 
       .output {
         width: 100%;
+        height: 100%;
       }
     }
   `;
 
+  if (isMobileLayout.value) {
+    return (
+      <sp-split-view
+        vertical
+        class="playground"
+        resizable
+        label="Resize the code sections vertically"
+      >
+        <div class="original-code">
+          <slot name="code-editor" />
+        </div>
+        <div class="output">
+          <div role="tablist" class="tab-list">
+            <button
+              id="tab-wc"
+              type="button"
+              role="tab"
+              title="Web Component"
+              aria-label="Web Component"
+              aria-selected={activeTab.value === 'tab-wc'}
+              onClick={() => (activeTab.value = 'tab-wc')}
+            >
+              Web Component
+            </button>
+            <button
+              id="tab-compiled"
+              type="button"
+              role="tab"
+              title="Compiled Code"
+              aria-label="Compiled Code"
+              aria-selected={activeTab.value === 'tab-compiled'}
+              onClick={() => (activeTab.value = 'tab-compiled')}
+            >
+              Compiled Code
+            </button>
+          </div>
+
+          <div
+            id="tab-wc"
+            class={`tab-content ${activeTab.value === 'tab-wc' ? 'active' : ''}`}
+          >
+            <slot name="preview-iframe" />
+          </div>
+
+          <div
+            id="tab-compiled"
+            class={`tab-content ${activeTab.value === 'tab-compiled' ? 'active' : ''}`}
+          >
+            <textarea disabled>{code.value}</textarea>
+          </div>
+        </div>
+      </sp-split-view>
+    );
+  }
+
   return (
     <sp-split-view
       class="playground"
       resizable
-      label="Resize the horizontal panels"
+      label="Resize the code sections horizontally"
     >
       <div class="original-code">
         <slot name="code-editor" />