diff --git a/surfsense_web/components/layout/ui/sidebar/NavSection.tsx b/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
index dc730bc4a..d58f52612 100644
--- a/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Check } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import type { NavItem } from "../../types/layout.types";
@@ -34,12 +35,14 @@ export function NavSection({ items, onItemClick, isCollapsed = false }: NavSecti
 									className={cn(
 										"relative flex h-10 w-10 items-center justify-center rounded-md transition-colors",
 										"hover:bg-accent hover:text-accent-foreground",
-										"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-										item.isActive && "bg-accent text-accent-foreground"
+										"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
 									)}
 									{...joyrideAttr}
 								>
 									<Icon className="h-4 w-4" />
+									{item.isActive && (
+										<Check className="absolute bottom-0.5 right-0.5 h-3 w-3 text-primary" />
+									)}
 									{item.badge && (
 										<span className="absolute top-0.5 right-0.5 inline-flex items-center justify-center min-w-[14px] h-[14px] px-0.5 rounded-full bg-red-500 text-white text-[9px] font-medium">
 											{item.badge}
@@ -64,13 +67,15 @@ export function NavSection({ items, onItemClick, isCollapsed = false }: NavSecti
 						className={cn(
 							"flex items-center gap-2 rounded-md mx-2 px-2 py-1.5 text-sm transition-colors text-left",
 							"hover:bg-accent hover:text-accent-foreground",
-							"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-							item.isActive && "bg-accent text-accent-foreground"
+							"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
 						)}
 						{...joyrideAttr}
 					>
 						<Icon className="h-4 w-4 shrink-0" />
 						<span className="flex-1 truncate">{item.title}</span>
+						{item.isActive && (
+							<Check className="h-4 w-4 shrink-0 text-primary" />
+						)}
 						{item.badge && (
 							<span className="inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-medium">
 								{item.badge}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
index 982d88e8b..66fe24565 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronUp, Languages, Laptop, LogOut, Moon, Settings, Sun } from "lucide-react";
+import { Check, ChevronUp, Languages, Laptop, LogOut, Moon, Settings, Sun } from "lucide-react";
 import { useTranslations } from "next-intl";
 import {
 	DropdownMenu,
@@ -197,11 +197,14 @@ export function SidebarUserProfile({
 													className={cn(
 														"mb-1 last:mb-0 transition-all",
 														"hover:bg-accent/50",
-														isSelected && "bg-accent/80"
+														isSelected && "text-primary"
 													)}
 												>
 													<Icon className="mr-2 h-4 w-4" />
 													<span className="flex-1">{t(themeOption.value)}</span>
+													{isSelected && (
+														<Check className="h-4 w-4 shrink-0" />
+													)}
 												</DropdownMenuItem>
 											);
 										})}
@@ -226,11 +229,14 @@ export function SidebarUserProfile({
 												className={cn(
 													"mb-1 last:mb-0 transition-all",
 													"hover:bg-accent/50",
-													isSelected && "bg-accent/80"
+													isSelected && "text-primary"
 												)}
 											>
 												<span className="mr-2">{language.flag}</span>
 												<span className="flex-1">{language.name}</span>
+												{isSelected && (
+													<Check className="h-4 w-4 shrink-0" />
+												)}
 											</DropdownMenuItem>
 										);
 									})}
@@ -302,26 +308,29 @@ export function SidebarUserProfile({
 								{t("theme")}
 							</DropdownMenuSubTrigger>
 							<DropdownMenuPortal>
-								<DropdownMenuSubContent className="gap-1">
-									{THEMES.map((themeOption) => {
-										const Icon = themeOption.icon;
-										const isSelected = theme === themeOption.value;
-										return (
-											<DropdownMenuItem
-												key={themeOption.value}
-												onClick={() => handleThemeChange(themeOption.value)}
-												className={cn(
-													"mb-1 last:mb-0 transition-all",
-													"hover:bg-accent/50",
-													isSelected && "bg-accent/80"
-												)}
-											>
-												<Icon className="mr-2 h-4 w-4" />
-												<span className="flex-1">{t(themeOption.value)}</span>
-											</DropdownMenuItem>
-										);
-									})}
-								</DropdownMenuSubContent>
+							<DropdownMenuSubContent className="gap-1">
+								{THEMES.map((themeOption) => {
+									const Icon = themeOption.icon;
+									const isSelected = theme === themeOption.value;
+									return (
+										<DropdownMenuItem
+											key={themeOption.value}
+											onClick={() => handleThemeChange(themeOption.value)}
+											className={cn(
+												"mb-1 last:mb-0 transition-all",
+												"hover:bg-accent/50",
+												isSelected && "text-primary"
+											)}
+										>
+											<Icon className="mr-2 h-4 w-4" />
+											<span className="flex-1">{t(themeOption.value)}</span>
+											{isSelected && (
+												<Check className="h-4 w-4 shrink-0" />
+											)}
+										</DropdownMenuItem>
+									);
+								})}
+							</DropdownMenuSubContent>
 							</DropdownMenuPortal>
 						</DropdownMenuSub>
 					)}
@@ -342,11 +351,14 @@ export function SidebarUserProfile({
 											className={cn(
 												"mb-1 last:mb-0 transition-all",
 												"hover:bg-accent/50",
-												isSelected && "bg-accent/80"
+												isSelected && "text-primary"
 											)}
 										>
 											<span className="mr-2">{language.flag}</span>
 											<span className="flex-1">{language.name}</span>
+											{isSelected && (
+												<Check className="h-4 w-4 shrink-0" />
+											)}
 										</DropdownMenuItem>
 									);
 								})}