diff --git a/src/components/BrandLogo.astro b/src/components/BrandLogo.astro
index 2c063a99caeaf..45083e0be0b92 100644
--- a/src/components/BrandLogo.astro
+++ b/src/components/BrandLogo.astro
@@ -5,9 +5,10 @@ export interface Props {
 	size?: `${number}rem` | `${number}px`;
 	shape?: 'circle' | 'rounded';
 	brand: LogoKey;
+	'data-current'?: boolean;
 }
 
-const { brand, size = '4rem', shape = 'circle' } = Astro.props as Props;
+const { brand, size = '4rem', shape = 'circle', 'data-current': dataCurrent } = Astro.props as Props;
 const { file, padding } = logos[brand] || {};
 
 // Make a rough guess at the pixel size to use as width/height attributes
@@ -18,7 +19,7 @@ const pixelSize = unit === 'px' ? valueAsNumber : valueAsNumber * 16;
 
 {
 	file && (
-		<div class:list={['logo', shape]} style={`--logo-size: ${size}; --logo-padding: ${padding};`}>
+		<div class:list={['logo', shape]} style={`--logo-size: ${size}; --logo-padding: ${padding};`} data-current={dataCurrent}>
 			<img
 				src={`/logos/${file}`}
 				alt=""
@@ -59,4 +60,10 @@ const pixelSize = unit === 'px' ? valueAsNumber : valueAsNumber * 16;
 		width: 100%;
 		height: 100%;
 	}
+
+	/* Active state styling */
+	.logo[data-current="true"] {
+		border: 4px solid var(--sl-color-text-accent);
+		transform: scale(1.05);
+	}
 </style>
diff --git a/src/components/NavGrid/Card.astro b/src/components/NavGrid/Card.astro
index 9c02277463e01..3df0024122291 100644
--- a/src/components/NavGrid/Card.astro
+++ b/src/components/NavGrid/Card.astro
@@ -13,8 +13,8 @@ export interface Props extends HTMLAttributes<'li'> {
 const { href, logo, current, minimal, class: classes, ...attrs } = Astro.props as Props;
 ---
 
-<li class:list={['card', minimal && 'card--minimal', classes]} {...attrs}>
-	{logo && <BrandLogo brand={logo} />}
+<li class:list={['card', minimal && 'card--minimal', current && 'card--current', classes]} {...attrs}>
+	{logo && <BrandLogo brand={logo} data-current={current} />}
 	<div class="stack sl-flex">
 		<h3>
 			<a href={href} aria-current={current ? 'page' : 'false'}>
diff --git a/src/components/NavGrid/CardsNav.astro b/src/components/NavGrid/CardsNav.astro
index 74b0906d81cec..d72ebabf15583 100644
--- a/src/components/NavGrid/CardsNav.astro
+++ b/src/components/NavGrid/CardsNav.astro
@@ -31,7 +31,7 @@ const currentPage = new URL(Astro.request.url).pathname;
 			links.map(({ description, href, logo, title, tags, lang }) => (
 				<Card
 					{...{ minimal, logo, href, lang }}
-					current={currentPage.includes(href)}
+					current={currentPage === href || currentPage.startsWith(href + '/')}
 					class={Object.keys(tags || {}).join(' ')}
 				>
 					<Fragment slot="title" set:html={title} />