diff --git a/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte b/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte
index 8ff82c8..7124972 100644
--- a/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte
+++ b/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte
@@ -17,13 +17,7 @@
 	<ul class="grid grid-cols-3 border border-r-0 border-gray bg-black">
 		{#each category.packages as pkg}
 			<div class="border border-t-0 border-l-0 border-gray p-4">
-				<MiniPackageCard
-					{pkg}
-					ctaLabel="DETAILS"
-					onClickCTA={async () => {
-						console.log('do something with:', pkg.full_name);
-					}}
-				/>
+				<MiniPackageCard {pkg} ctaLabel="DETAILS" link={`/packages/${pkg.slug}`} />
 			</div>
 		{/each}
 	</ul>
diff --git a/modules/ui/src/MiniPackageCard/MiniPackageCard.svelte b/modules/ui/src/MiniPackageCard/MiniPackageCard.svelte
index 60e69f6..924b598 100644
--- a/modules/ui/src/MiniPackageCard/MiniPackageCard.svelte
+++ b/modules/ui/src/MiniPackageCard/MiniPackageCard.svelte
@@ -6,6 +6,7 @@
 
 	export let pkg: Package;
 	export let ctaLabel: string;
+	export let link = '';
 
 	export let onClickCTA = () => {
 		console.log('do nothing');
@@ -37,7 +38,13 @@
 				>
 			</p>
 		</div>
-		<button class="h-6 w-full font-machina text-xs" on:click={onClickCTA}>{ctaLabel}</button>
+		{#if link}
+			<a href={link}>
+				<button class="h-6 w-full font-machina text-xs">{ctaLabel}</button>
+			</a>
+		{:else}
+			<button class="h-6 w-full font-machina text-xs" on:click={onClickCTA}>{ctaLabel}</button>
+		{/if}
 	</footer>
 </section>