diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
index 61cba21..4eee35b 100644
--- a/frontend/src/components/SideBar.vue
+++ b/frontend/src/components/SideBar.vue
@@ -156,7 +156,8 @@ const handleCategoryClick = (category) => {
 </template>
 
 <style lang="css">
-.sidebar-button.active {
+.sidebar-button.active,
+.sidebar-button.active:hover{
 	background-color: var(--primary-color);
 	color: white;
 	border-left: 3px solid var(--primary-600);
@@ -166,8 +167,8 @@ const handleCategoryClick = (category) => {
 .sidebar-button:hover {
 	background-color: var(--surface-hover);
 	color: var(--primary-color);
-	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
-	transform: translateX(2px);
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
+	transform: translateX(1px);
 }
 
 .button-icon {
@@ -177,11 +178,17 @@ const handleCategoryClick = (category) => {
 	margin-left: 10px;
 	margin-right: 10px;
 	opacity: 0.9;
+	color: black;
 }
 
 .sidebar-button.active .button-icon,
+.sidebar-button.active:hover .button-icon{
+	opacity: 1;
+	color: white;
+}
 .sidebar-button:hover .button-icon {
 	opacity: 1;
+	color: black;
 }
 
 .create-item {
@@ -282,10 +289,15 @@ const handleCategoryClick = (category) => {
 }
 
 .toggle-icon {
+	color: black;
 	width: 16px;
 	height: 16px;
 }
 
+.toggle-icon:hover {
+	color: white;
+}
+
 .collapsed .button-text {
 	display: none;
 }