diff --git a/.changeset/common-candies-kiss.md b/.changeset/common-candies-kiss.md
index cce95a47ba..9b7a1ca427 100644
--- a/.changeset/common-candies-kiss.md
+++ b/.changeset/common-candies-kiss.md
@@ -1,7 +1,5 @@
 ---
-'@backstage/create-app': minor
-'example-app-next': minor
-'@backstage/canon': minor
+'@backstage/create-app': patch
 ---
 
 Canon is now ready to be used in Alpha. We are adding a custom CSS file at the root of the app to make all styles available for Canon components.
diff --git a/.changeset/neat-paths-see.md b/.changeset/neat-paths-see.md
new file mode 100644
index 0000000000..f540a22535
--- /dev/null
+++ b/.changeset/neat-paths-see.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Introducing Canon to Backstage. Canon styling system is based on pure CSS. We are adding our styles.css at the top of your Backstage instance.
diff --git a/packages/app-next/src/App.tsx b/packages/app-next/src/App.tsx
index b2e98f2201..1992d5b35f 100644
--- a/packages/app-next/src/App.tsx
+++ b/packages/app-next/src/App.tsx
@@ -45,8 +45,6 @@ import { convertLegacyPlugin } from '@backstage/core-compat-api';
 import { convertLegacyPageExtension } from '@backstage/core-compat-api';
 import { convertLegacyEntityContentExtension } from '@backstage/plugin-catalog-react/alpha';
 
-import '@backstage/canon/css/styles.css';
-
 /*
 
 # Notes
diff --git a/packages/app-next/src/index.tsx b/packages/app-next/src/index.tsx
index 37a2574484..82b9595c84 100644
--- a/packages/app-next/src/index.tsx
+++ b/packages/app-next/src/index.tsx
@@ -17,5 +17,6 @@
 import '@backstage/cli/asset-types';
 import ReactDOM from 'react-dom/client';
 import app from './App';
+import '@backstage/canon/css/styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(app);
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 95c0c4e305..7e914bdc9b 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -86,8 +86,6 @@ import {
   UserNotificationSettingsCard,
 } from '@backstage/plugin-notifications';
 
-import '@backstage/canon/css/styles.css';
-
 const app = createApp({
   apis,
   icons: {
diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx
index e5ca03fe64..a26c26e284 100644
--- a/packages/app/src/index.tsx
+++ b/packages/app/src/index.tsx
@@ -18,5 +18,6 @@ import '@backstage/cli/asset-types';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import '@backstage/canon/css/styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx
index 266001dea9..e24c4689bb 100644
--- a/packages/create-app/templates/default-app/packages/app/src/App.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx
@@ -37,8 +37,6 @@ import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 
-import '@backstage/canon/css/styles.css';
-
 const app = createApp({
   apis,
   bindRoutes({ bind }) {
diff --git a/packages/create-app/templates/default-app/packages/app/src/index.tsx b/packages/create-app/templates/default-app/packages/app/src/index.tsx
index d875c774c8..604afbe3c4 100644
--- a/packages/create-app/templates/default-app/packages/app/src/index.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/index.tsx
@@ -2,5 +2,6 @@ import '@backstage/cli/asset-types';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import '@backstage/canon/css/styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />);