diff --git a/surfsense_web/components/layout/ui/sidebar/NavSection.tsx b/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
index 3eb66f3cd..9b0a115c6 100644
--- a/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
@@ -97,6 +97,7 @@ export function NavSection({ items, onItemClick, isCollapsed = false }: NavSecti
 						label={item.title}
 						onClick={() => onItemClick?.(item)}
 						isCollapsed={isCollapsed}
+						isActive={item.isActive}
 						badge={item.badge}
 						collapsedOverlay={<CollapsedOverlay item={item} />}
 						expandedIconNode={
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx
index b40919eae..1247849f6 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx
@@ -10,6 +10,7 @@ interface SidebarButtonProps {
 	label: string;
 	onClick?: () => void;
 	isCollapsed?: boolean;
+	isActive?: boolean;
 	badge?: React.ReactNode;
 	/** Overlay in the top-right corner of the collapsed icon (e.g. status badge) */
 	collapsedOverlay?: React.ReactNode;
@@ -37,12 +38,15 @@ export function SidebarButton({
 	label,
 	onClick,
 	isCollapsed = false,
+	isActive = false,
 	badge,
 	collapsedOverlay,
 	expandedIconNode,
 	className,
 	buttonProps,
 }: SidebarButtonProps) {
+	const activeClassName = "bg-accent text-accent-foreground";
+
 	if (isCollapsed) {
 		return (
 			<Tooltip>
@@ -50,7 +54,7 @@ export function SidebarButton({
 					<button
 						type="button"
 						onClick={onClick}
-						className={cn(collapsedClassName, className)}
+						className={cn(collapsedClassName, isActive && activeClassName, className)}
 						{...buttonProps}
 					>
 						<Icon className="h-4 w-4" />
@@ -70,7 +74,7 @@ export function SidebarButton({
 		<button
 			type="button"
 			onClick={onClick}
-			className={cn(expandedClassName, className)}
+			className={cn(expandedClassName, isActive && activeClassName, className)}
 			{...buttonProps}
 		>
 			{expandedIconNode ?? <Icon className="h-4 w-4 shrink-0" />}
diff --git a/surfsense_web/components/ui/hero-carousel.tsx b/surfsense_web/components/ui/hero-carousel.tsx
index 43a01d130..6bd5fbcf8 100644
--- a/surfsense_web/components/ui/hero-carousel.tsx
+++ b/surfsense_web/components/ui/hero-carousel.tsx
@@ -88,8 +88,7 @@ function HeroCarouselCard({
 
 	return (
 		<>
-			<div className="rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900">
-				<div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
+				<div className="overflow-hidden rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900">				<div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
 					<div className="min-w-0">
 						<h3 className="truncate text-base font-semibold text-neutral-900 sm:text-xl dark:text-white">
 							{title}