diff --git a/src/lib/components/SyncIndicator.svelte b/src/lib/components/SyncIndicator.svelte
index 5b92f19..93c07a2 100644
--- a/src/lib/components/SyncIndicator.svelte
+++ b/src/lib/components/SyncIndicator.svelte
@@ -46,12 +46,12 @@
 
 <div class="flex items-center" title="Sync status: {status}" data-testid="sync-indicator">
 	{#if displayStatus === 'synced'}
-		<CloudCheck class="h-5 w-5 text-green-500" />
+		<CloudCheck class="h-5 w-5 text-[var(--primary)]" />
 	{:else if displayStatus === 'syncing'}
-		<CloudSync class="h-5 w-5 text-blue-500" />
+		<CloudSync class="h-5 w-5 text-[var(--primary)] opacity-60" />
 	{:else if displayStatus === 'offline'}
-		<CloudOff class="h-5 w-5 text-yellow-500" />
+		<CloudOff class="h-5 w-5 text-[var(--text-muted)]" />
 	{:else}
-		<CloudAlert class="h-5 w-5 text-red-500" />
+		<CloudAlert class="h-5 w-5 text-[#b44]" />
 	{/if}
 </div>
diff --git a/todo.md b/todo.md
new file mode 100644
index 0000000..5e6697f
--- /dev/null
+++ b/todo.md
@@ -0,0 +1,5 @@
+- [x] use colors for the cloud status icon that fit more into the colour scheme
+- [x] do we actually have a colour palette and theme ?
+- [ ] choose diffent icon for the background colour
+- [ ] make sure we use only lucid icons everywhere
+- [ ]