diff --git a/src/lib/components/ColorPicker.svelte b/src/lib/components/ColorPicker.svelte
index 3e9c00b..dda8f9a 100644
--- a/src/lib/components/ColorPicker.svelte
+++ b/src/lib/components/ColorPicker.svelte
@@ -15,7 +15,7 @@
 		{@const colors = NOTE_COLORS[option.value]}
 		<button
 			onclick={() => onSelect(option.value)}
-			class="h-8 w-8 rounded-full border-2 transition-transform hover:scale-110 {selected === option.value ? 'border-[var(--text)]' : 'border-transparent'}"
+			class="h-8 w-8 rounded-full border-2 transition-transform hover:scale-110 {selected === option.value ? 'border-[var(--text)]' : 'border-[var(--border-subtle)]'}"
 			style="background-color: {colors.bg}"
 			title={option.label}
 			data-testid="color-{option.value}"
diff --git a/todo.md b/todo.md
index 69fb292..7c6079a 100644
--- a/todo.md
+++ b/todo.md
@@ -3,9 +3,10 @@
 - [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
+- [x] 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
+- [ ] close the menu by default on mobile