diff --git a/canon-docs/src/app/(docs)/page.mdx b/canon-docs/src/app/(docs)/page.mdx
index b2abdefb12..862127ec7b 100644
--- a/canon-docs/src/app/(docs)/page.mdx
+++ b/canon-docs/src/app/(docs)/page.mdx
@@ -24,8 +24,7 @@ Install Canon using a package manager.
 Import the global CSS file at the root of your application.
 
 ```tsx
-import '@backstage/canon/css/core.css';
-import '@backstage/canon/css/components.css';
+import '@backstage/canon/css/styles.css';
 ```
 
 ### 3. Start building ✨
diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx
index e278bb011f..b1bfa2dc88 100644
--- a/packages/canon/.storybook/preview.tsx
+++ b/packages/canon/.storybook/preview.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import type { Preview, ReactRenderer } from '@storybook/react';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
-
-// Canon specific styles
-import '../src/css/core.css';
-import '../src/css/components.css';
+import '../src/css/styles.css';
 
 const preview: Preview = {
   parameters: {