diff --git a/src/lib/client/assets/logo-firefox-circular-arrow.png b/src/lib/client/assets/logo-512.png
similarity index 100%
rename from src/lib/client/assets/logo-firefox-circular-arrow.png
rename to src/lib/client/assets/logo-512.png
diff --git a/src/lib/client/ui/form/IconCheckbox.svelte b/src/lib/client/ui/form/IconCheckbox.svelte
index e5c436e..dde175c 100644
--- a/src/lib/client/ui/form/IconCheckbox.svelte
+++ b/src/lib/client/ui/form/IconCheckbox.svelte
@@ -1,24 +1,11 @@
 <script lang="ts">
-	import type { Component } from 'svelte';
-	import type { MouseEventHandler } from 'svelte/elements';
+	import type { ComponentType } from 'svelte';
 
-	interface Props {
-		checked?: boolean;
-		icon: Component<{ size?: number; class?: string }>;
-		color?: string; // accent, blue, green, red, or hex color like #FFC230
-		shape?: 'square' | 'circle' | 'rounded';
-		disabled?: boolean;
-		onclick?: MouseEventHandler<HTMLButtonElement>;
-	}
-
-	let {
-		checked = false,
-		icon,
-		color = 'accent',
-		shape = 'rounded',
-		disabled = false,
-		onclick
-	}: Props = $props();
+	export let checked: boolean = false;
+	export let icon: ComponentType;
+	export let color: string = 'accent'; // accent, blue, green, red, or hex color like #FFC230
+	export let shape: 'square' | 'circle' | 'rounded' = 'rounded';
+	export let disabled: boolean = false;
 
 	// Shape classes
 	const shapeClasses: Record<string, string> = {
@@ -27,23 +14,9 @@
 		rounded: 'rounded'
 	};
 
-	const shapeClass = $derived(shapeClasses[shape] || shapeClasses.rounded);
-	const isCustomColor = $derived(color.startsWith('#'));
-	const isAccent = $derived(color === 'accent');
-
-	const colorClasses: Record<string, string> = {
-		accent:
-			'bg-accent-600 border-accent-600 dark:bg-accent-500 dark:border-accent-500 hover:brightness-110',
-		green:
-			'bg-green-600 border-green-600 dark:bg-green-500 dark:border-green-500 hover:brightness-110',
-		red: 'bg-red-600 border-red-600 dark:bg-red-500 dark:border-red-500 hover:brightness-110',
-		blue: 'bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500 hover:brightness-110'
-	};
-
-	const uncheckedClass =
-		'bg-neutral-50 border-neutral-300 hover:bg-neutral-100 hover:border-neutral-400 dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:hover:border-neutral-500';
-
-	const checkedClass = $derived(colorClasses[color] || colorClasses.accent);
+	$: shapeClass = shapeClasses[shape] || shapeClasses.rounded;
+	$: isCustomColor = color.startsWith('#');
+	$: isAccent = color === 'accent';
 </script>
 
 {#if isCustomColor}
@@ -52,35 +25,104 @@
 		role="checkbox"
 		aria-checked={checked}
 		{disabled}
-		{onclick}
+		on:click
 		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {disabled
 			? 'cursor-not-allowed opacity-50'
 			: 'cursor-pointer focus:outline-none'} {checked
 			? 'hover:brightness-110'
-			: uncheckedClass}"
+			: 'bg-neutral-50 hover:bg-neutral-100 hover:border-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:hover:border-neutral-500'}"
 		style="background-color: {checked ? color : ''}; border-color: {checked
 			? color
 			: 'rgb(229, 231, 235)'};"
 	>
 		{#if checked}
-			{@const Icon = icon}
-			<Icon size={14} class="text-white" />
+			<svelte:component this={icon} size={14} class="text-white" />
 		{/if}
 	</button>
-{:else}
+{:else if isAccent}
 	<button
 		type="button"
 		role="checkbox"
 		aria-checked={checked}
 		{disabled}
-		{onclick}
+		on:click
 		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
-			? checkedClass
-			: uncheckedClass} {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer focus:outline-none'}"
+			? 'bg-accent-600 border-accent-600 dark:bg-accent-500 dark:border-accent-500 hover:brightness-110'
+			: 'bg-neutral-50 border-neutral-300 hover:bg-neutral-100 hover:border-neutral-400 dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:hover:border-neutral-500'} {disabled
+			? 'cursor-not-allowed opacity-50'
+			: 'cursor-pointer focus:outline-none'}"
 	>
 		{#if checked}
-			{@const Icon = icon}
-			<Icon size={14} class="text-white" />
+			<svelte:component this={icon} size={14} class="text-white" />
+		{/if}
+	</button>
+{:else if color === 'green'}
+	<button
+		type="button"
+		role="checkbox"
+		aria-checked={checked}
+		{disabled}
+		on:click
+		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
+			? 'bg-green-600 border-green-600 dark:bg-green-500 dark:border-green-500 hover:brightness-110'
+			: 'bg-neutral-50 border-neutral-300 hover:bg-neutral-100 hover:border-neutral-400 dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:hover:border-neutral-500'} {disabled
+			? 'cursor-not-allowed opacity-50'
+			: 'cursor-pointer focus:outline-none'}"
+	>
+		{#if checked}
+			<svelte:component this={icon} size={14} class="text-white" />
+		{/if}
+	</button>
+{:else if color === 'red'}
+	<button
+		type="button"
+		role="checkbox"
+		aria-checked={checked}
+		{disabled}
+		on:click
+		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
+			? 'bg-red-600 border-red-600 dark:bg-red-500 dark:border-red-500 hover:brightness-110'
+			: 'bg-neutral-50 border-neutral-300 hover:bg-neutral-100 hover:border-neutral-400 dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:hover:border-neutral-500'} {disabled
+			? 'cursor-not-allowed opacity-50'
+			: 'cursor-pointer focus:outline-none'}"
+	>
+		{#if checked}
+			<svelte:component this={icon} size={14} class="text-white" />
+		{/if}
+	</button>
+{:else if color === 'blue'}
+	<button
+		type="button"
+		role="checkbox"
+		aria-checked={checked}
+		{disabled}
+		on:click
+		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
+			? 'bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500 hover:brightness-110'
+			: 'bg-neutral-50 border-neutral-300 hover:bg-neutral-100 hover:border-neutral-400 dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:hover:border-neutral-500'} {disabled
+			? 'cursor-not-allowed opacity-50'
+			: 'cursor-pointer focus:outline-none'}"
+	>
+		{#if checked}
+			<svelte:component this={icon} size={14} class="text-white" />
+		{/if}
+	</button>
+{:else}
+	<!-- Fallback to accent for unknown colors -->
+	<button
+		type="button"
+		role="checkbox"
+		aria-checked={checked}
+		{disabled}
+		on:click
+		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
+			? 'bg-accent-600 border-accent-600 dark:bg-accent-500 dark:border-accent-500 hover:brightness-110'
+			: 'bg-neutral-50 border-neutral-300 hover:bg-neutral-100 hover:border-neutral-400 dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:hover:border-neutral-500'} {disabled
+			? 'cursor-not-allowed opacity-50'
+			: 'cursor-pointer focus:outline-none'}"
+	>
+		{#if checked}
+			<svelte:component this={icon} size={14} class="text-white" />
 		{/if}
 	</button>
 {/if}
diff --git a/src/lib/client/ui/navigation/navbar/navbar.svelte b/src/lib/client/ui/navigation/navbar/navbar.svelte
index bf2e08d..ed114af 100644
--- a/src/lib/client/ui/navigation/navbar/navbar.svelte
+++ b/src/lib/client/ui/navigation/navbar/navbar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import AccentPicker from './accentPicker.svelte';
 	import ThemeToggle from './themeToggle.svelte';
-	import logo from '$assets/logo-firefox-circular-arrow.png';
+	import logo from '$assets/logo-512.png';
 
 	export let collapsed: boolean = false;
 </script>
diff --git a/src/lib/client/ui/navigation/pageNav/groupHeader.svelte b/src/lib/client/ui/navigation/pageNav/groupHeader.svelte
index cb41419..4cbf6eb 100644
--- a/src/lib/client/ui/navigation/pageNav/groupHeader.svelte
+++ b/src/lib/client/ui/navigation/pageNav/groupHeader.svelte
@@ -28,8 +28,7 @@
 			: ''}"
 	>
 		{#if icon}
-			{@const Icon = icon}
-			<Icon class="h-4 w-4" />
+			<svelte:component this={icon} class="h-4 w-4" />
 		{/if}
 		{label}
 	</a>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6cc397c..70f05c7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import '../app.css';
-	import logo from '$assets/logo-firefox-circular-arrow.png';
+	import logo from '$assets/logo-512.png';
 	import Navbar from '$ui/navigation/navbar/navbar.svelte';
 	import PageNav from '$ui/navigation/pageNav/pageNav.svelte';
 	import AlertContainer from '$alerts/AlertContainer.svelte';
diff --git a/src/routes/settings/general/components/UISettings.svelte b/src/routes/settings/general/components/UISettings.svelte
index 0cb3e8d..79e6468 100644
--- a/src/routes/settings/general/components/UISettings.svelte
+++ b/src/routes/settings/general/components/UISettings.svelte
@@ -32,12 +32,12 @@
 					<IconCheckbox
 						icon={Check}
 						checked={useEmojis}
-						onclick={toggle}
+						on:click={toggle}
 					/>
 					<button
 						type="button"
 						class="flex-1 text-left"
-						onclick={toggle}
+						on:click={toggle}
 					>
 						<span class="text-sm font-medium text-neutral-900 dark:text-neutral-50">
 							Use Emojis