diff --git a/e2e/mobile-layout.spec.ts b/e2e/mobile-layout.spec.ts
new file mode 100644
index 00000000000..1256dbd8a59
--- /dev/null
+++ b/e2e/mobile-layout.spec.ts
@@ -0,0 +1,91 @@
+import { test, expect } from '@playwright/test';
+
+import translations from '../client/i18n/locales/english/translations.json';
+
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+test.describe('Classic challenge - 5 tabs mobile layout component', () => {
+  test.skip(
+    ({ isMobile }) => isMobile === false,
+    'Skip testing on desktop as this component is only used for mobile'
+  );
+
+  test('The page has mobile layout with "Instruction", "Code", "Console", "Preview", "Portal Preview" tabs', async ({
+    page
+  }) => {
+    await page.goto(
+      'learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
+    );
+
+    const tabs = page.getByRole('tablist');
+    await expect(tabs).toBeVisible();
+
+    const instructions = page.getByRole('tab', {
+      name: translations.learn['editor-tabs'].instructions
+    });
+    await expect(instructions).toBeVisible();
+    const code = page.getByRole('tab', {
+      name: translations.learn['editor-tabs'].code
+    });
+    await expect(code).toBeVisible();
+    const console = page.getByRole('tab', {
+      name: translations.learn['editor-tabs'].console
+    });
+    await expect(console).toBeVisible();
+    const preview = page.getByRole('tab', {
+      name: translations.learn['editor-tabs'].preview
+    });
+    await expect(preview).toBeVisible();
+    const portalButton = page.getByRole('button', {
+      name: translations.aria['move-preview-to-new-window']
+    });
+    await expect(portalButton).toBeVisible();
+
+    const help = page.getByRole('button', { name: translations.buttons.help });
+    await expect(help).toBeVisible();
+    const save = page.getByRole('button', { name: translations.buttons.save });
+    await expect(save).toBeVisible();
+    const run = page.getByRole('button', { name: translations.buttons.run });
+    await expect(run).toBeVisible();
+  });
+});
+
+test.describe('Classic challenge - 3 tabs mobile layout component', () => {
+  test.skip(
+    ({ isMobile }) => isMobile === false,
+    'Skip testing on desktop as this component is only used for mobile'
+  );
+
+  test('The page has mobile layout with "Instruction", "Code", "Console" tabs', async ({
+    page
+  }) => {
+    await page.goto(
+      'learn/javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers'
+    );
+
+    const tabs = page.getByRole('tablist');
+    await expect(tabs).toBeVisible();
+
+    const instructions = page.getByRole('tab', {
+      name: translations.learn['editor-tabs'].instructions
+    });
+    await expect(instructions).toBeVisible();
+    const code = page.getByRole('tab', {
+      name: translations.learn['editor-tabs'].code
+    });
+    await expect(code).toBeVisible();
+    const console = page.getByRole('tab', {
+      name: translations.learn['editor-tabs'].console
+    });
+    await expect(console).toBeVisible();
+
+    const help = page.getByRole('button', { name: translations.buttons.help });
+    await expect(help).toBeVisible();
+    const reset = page.getByRole('button', {
+      name: translations.buttons.reset
+    });
+    await expect(reset).toBeVisible();
+    const run = page.getByRole('button', { name: translations.buttons.run });
+    await expect(run).toBeVisible();
+  });
+});