diff --git a/src/lib/components/Layout/Header.svelte b/src/lib/components/Layout/Header.svelte
index 15aac27..a66202e 100644
--- a/src/lib/components/Layout/Header.svelte
+++ b/src/lib/components/Layout/Header.svelte
@@ -2,32 +2,51 @@
 	import SearchBar from '../SearchBar.svelte';
 	import SyncIndicator from '../SyncIndicator.svelte';
 	import Menu from 'lucide-svelte/icons/menu';
+	import Search from 'lucide-svelte/icons/search';
 
 	interface Props {
 		onMenuToggle: () => void;
 	}
 
 	let { onMenuToggle }: Props = $props();
+	let mobileSearchOpen = $state(false);
 </script>
 
 <header class="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-[var(--border)] bg-[var(--bg-surface)] px-4">
-	<button
-		onclick={onMenuToggle}
-		class="rounded-sm p-2 hover:bg-[var(--border)]/10"
-		aria-label="Toggle sidebar"
-	>
-		<Menu class="h-6 w-6 text-[var(--text)]" />
-	</button>
+	{#if mobileSearchOpen}
+		<!-- Mobile expanded search -->
+		<div class="flex flex-1 items-center gap-2 lg:hidden">
+			<SearchBar onClose={() => (mobileSearchOpen = false)} />
+		</div>
+	{:else}
+		<button
+			onclick={onMenuToggle}
+			class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+			aria-label="Toggle sidebar"
+		>
+			<Menu class="h-6 w-6 text-[var(--text)]" />
+		</button>
 
-	<div class="flex items-center gap-2">
-		<h1 class="font-['Press_Start_2P'] text-lg text-[var(--primary)]">Crumbs</h1>
-	</div>
+		<div class="flex items-center gap-2">
+			<h1 class="font-['Press_Start_2P'] text-lg text-[var(--primary)]">Crumbs</h1>
+		</div>
 
-	<div class="mx-4 flex-1">
-		<SearchBar />
-	</div>
+		<!-- Desktop search bar -->
+		<div class="mx-4 hidden flex-1 lg:block">
+			<SearchBar />
+		</div>
 
-	<div class="flex items-center gap-2">
-		<SyncIndicator />
-	</div>
+		<!-- Mobile search icon -->
+		<button
+			onclick={() => (mobileSearchOpen = true)}
+			class="ml-auto rounded-sm p-2 hover:bg-[var(--border)]/10 lg:hidden"
+			aria-label="Search"
+		>
+			<Search class="h-5 w-5 text-[var(--text)]" />
+		</button>
+
+		<div class="flex items-center gap-2">
+			<SyncIndicator />
+		</div>
+	{/if}
 </header>
diff --git a/src/lib/components/SearchBar.svelte b/src/lib/components/SearchBar.svelte
index 02c8549..32c517a 100644
--- a/src/lib/components/SearchBar.svelte
+++ b/src/lib/components/SearchBar.svelte
@@ -3,10 +3,22 @@
 	import type { Note } from '$lib/types/index.js';
 	import Search from 'lucide-svelte/icons/search';
 	import X from 'lucide-svelte/icons/x';
+	import ArrowLeft from 'lucide-svelte/icons/arrow-left';
+
+	interface Props {
+		onClose?: () => void;
+	}
+
+	let { onClose }: Props = $props();
 
 	let query = $state('');
 	let originalNotes: Note[] = [];
 	let isSearching = $state(false);
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	$effect(() => {
+		if (onClose) inputEl?.focus();
+	});
 
 	async function handleSearch() {
 		if (!query.trim()) {
@@ -36,12 +48,24 @@
 			isSearching = false;
 		}
 	}
+
+	function close() {
+		clearSearch();
+		onClose?.();
+	}
 </script>
 
-<div class="relative max-w-2xl">
+<div class="relative flex-1 max-w-2xl">
 	<div class="flex items-center rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-2 focus-within:border-[var(--primary)]">
-		<Search class="mr-3 h-5 w-5 text-[var(--text-muted)]" />
+		{#if onClose}
+			<button onclick={close} class="mr-2 text-[var(--text-muted)] hover:text-[var(--text)]" aria-label="Back">
+				<ArrowLeft class="h-5 w-5" />
+			</button>
+		{:else}
+			<Search class="mr-3 h-5 w-5 text-[var(--text-muted)]" />
+		{/if}
 		<input
+			bind:this={inputEl}
 			type="text"
 			placeholder="Search crumbs..."
 			bind:value={query}
diff --git a/todo.md b/todo.md
index 17ce89f..69fb292 100644
--- a/todo.md
+++ b/todo.md
@@ -2,3 +2,10 @@
 - [x] do we actually have a colour palette and theme ?
 - [x] choose diffent icon for the background colour
 - [x] make sure we use only lucid icons everywhere
+- [x] on mobile the header is clutered, maybe we can colapse the search bar into a search icon, and when clicked it opens a search bar to search
+- [ ] let's add an outline on the colour palette selection for the background to make each colour more visible
+- [ ] on mobile the colour selection overflows outside the screen
+- [ ] let's use another icon for toggling the raw md mode, also the active state doesn't make on this icon now, either we change the icon when it's in one state or the other, or the button should be active when the md state is active
+- [ ] same for the list icon, toggling between this mode is nice but the icon becomes inactive which is weird
+- [ ] on mobile the toolbar collapose on two lines, can we do something so it stays only on one line and we have a dropdown to open the additional options
+- [ ] add this todo.md to gitignore and remove from git