diff --git a/layouts/client.vue b/layouts/client.vue
index ddd4150..3162620 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -20,7 +20,7 @@
 					</NuxtLink>
 				</div>
 				<NuxtLink id="settings-menu" href="/settings">
-					<Icon name="lucide:settings" class="sidebar-icon" style="background-color: var(--primary-color)" alt="Settings menu" />
+					<Icon name="lucide:settings" class="sidebar-icon" alt="Settings menu" />
 				</NuxtLink>
 			</div>
 			<slot />
@@ -112,6 +112,12 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	height: 3rem;
 	overflow-y: scroll;
 	overflow-x: hidden;
+
+	background-color: var(--primary-color)
+}
+
+.sidebar-icon:hover {
+	background-color: var(--primary-highlighted-color)
 }
 
 #home-button {