diff --git a/frontend/src/lib/components/WorkspaceHeader.svelte b/frontend/src/lib/components/WorkspaceHeader.svelte
index 87f153c..e9e7b97 100644
--- a/frontend/src/lib/components/WorkspaceHeader.svelte
+++ b/frontend/src/lib/components/WorkspaceHeader.svelte
@@ -60,30 +60,38 @@
 			else mobileMode = 'hidden';
 		}
 	}
+
+	function handleTabClick(tab: TabType, lang?: string) {
+		activeTab = tab;
+		if (lang) currentLanguage = lang;
+		if (isMobile && mobileMode === 'hidden') {
+			mobileMode = 'half';
+		}
+	}
 </script>
 
 {#snippet chromeTabs()}
 	{#if hasInfo}
-		<button class="chrome-tab" class:active={activeTab === 'info'} onclick={() => (activeTab = 'info')}>Info</button>
+		<button class="chrome-tab" class:active={activeTab === 'info'} onclick={() => handleTabClick('info')}>Info</button>
 	{/if}
 	{#if hasExercise}
-		<button class="chrome-tab" class:active={activeTab === 'exercise'} onclick={() => (activeTab = 'exercise')}>Exercise</button>
+		<button class="chrome-tab" class:active={activeTab === 'exercise'} onclick={() => handleTabClick('exercise')}>Exercise</button>
 	{/if}
 	{#if hasCodeEditor}
 		{#if hasMultiLang}
-			<button class="chrome-tab" class:active={activeTab === 'editor' && currentLanguage === 'c'} onclick={() => { activeTab = 'editor'; currentLanguage = 'c'; }}>C</button>
-			<button class="chrome-tab" class:active={activeTab === 'editor' && currentLanguage === 'python'} onclick={() => { activeTab = 'editor'; currentLanguage = 'python'; }}>Python</button>
+			<button class="chrome-tab" class:active={activeTab === 'editor' && currentLanguage === 'c'} onclick={() => handleTabClick('editor', 'c')}>C</button>
+			<button class="chrome-tab" class:active={activeTab === 'editor' && currentLanguage === 'python'} onclick={() => handleTabClick('editor', 'python')}>Python</button>
 		{:else}
-			<button class="chrome-tab" class:active={activeTab === 'editor'} onclick={() => (activeTab = 'editor')}>Code</button>
+			<button class="chrome-tab" class:active={activeTab === 'editor'} onclick={() => handleTabClick('editor')}>Code</button>
 		{/if}
 	{/if}
 	{#if hasCircuit}
-		<button class="chrome-tab" class:active={activeTab === 'circuit'} onclick={() => (activeTab = 'circuit')}>Circuit</button>
+		<button class="chrome-tab" class:active={activeTab === 'circuit'} onclick={() => handleTabClick('circuit')}>Circuit</button>
 	{/if}
 	{#if hasVelxio}
-		<button class="chrome-tab" class:active={activeTab === 'velxio'} onclick={() => (activeTab = 'velxio')}>Arduino</button>
+		<button class="chrome-tab" class:active={activeTab === 'velxio'} onclick={() => handleTabClick('velxio')}>Arduino</button>
 	{/if}
-	<button class="chrome-tab" class:active={activeTab === 'output'} onclick={() => (activeTab = 'output')}>Output</button>
+	<button class="chrome-tab" class:active={activeTab === 'output'} onclick={() => handleTabClick('output')}>Output</button>
 {/snippet}
 
 {#if isMobile}
diff --git a/frontend/src/routes/lesson/[slug]/+page.svelte b/frontend/src/routes/lesson/[slug]/+page.svelte
index b129ce8..4d748e7 100644
--- a/frontend/src/routes/lesson/[slug]/+page.svelte
+++ b/frontend/src/routes/lesson/[slug]/+page.svelte
@@ -150,7 +150,7 @@
 
 	// Mobile state: 'hidden' (only handle bar), 'half' (60%), 'full' (100%)
 	let isMobile = $state(false);
-	let mobileMode = $state<'hidden' | 'half' | 'full'>('half');
+	let mobileMode = $state<'hidden' | 'half' | 'full'>('hidden');
 
 	// Media query detection
 	$effect(() => {
@@ -209,7 +209,7 @@
 			else if (isVelxioLesson) activeTab = 'velxio' as any;
 			else if (lesson.active_tabs?.includes('circuit') && !hasC && !hasPython) activeTab = 'circuit';
 			else activeTab = 'editor';
-			mobileMode = 'half';
+			mobileMode = 'hidden';
 
 			// Populate navbar context
 			lessonContext.set({