diff --git a/components/src/HighlightCard/HighlightCard.stories.svelte b/components/src/HighlightCard/HighlightCard.stories.svelte
index 697dce2a..88a35743 100644
--- a/components/src/HighlightCard/HighlightCard.stories.svelte
+++ b/components/src/HighlightCard/HighlightCard.stories.svelte
@@ -1,7 +1,6 @@
 <script context="module" lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import HighlightCard from './HighlightCard.svelte';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+	import { HighlightCard, DesignTokens } from '../index.js';
 
 	const { Story } = defineMeta({
 		title: 'Display/Card/HighlightCard',
diff --git a/components/src/index.js b/components/src/index.js
index 9755b1fa..06dd7691 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -16,6 +16,7 @@ export { default as Breakout } from './Breakout/Breakout.svelte';
 
 // Display
 export { default as Card } from './Card/Card.svelte';
+export { default as HighlightCard } from './HighlightCard/HighlightCard.svelte';
 
 // Chart
 export { default as ChartHeader } from './ChartHeader/ChartHeader.svelte';